React using method parameter as an object key to update state

Question

How can I use a function parameter as a property name to update state i.e.

onStudentPinChange = (propertyName, e) => {
    this.setState({
      formFields: { ...this.state.formFields, propertyName: e.target.value }
    });
};

the code above throw error

I would like to use that propertyName variable as an object key I googled and tried many different techniques like this.state.formFields[propertName]

I am creating a new web-app I have a few form fields which needed to be filled to login to the admin area. I have three methods which are basically doing the same thing just updating the relevant state

onStudentPinChange = (propertyName, e) => {
    var item = { ...this.state.formFields };
    item[propertyName] = e.target.value;
    console.log(item);
    this.setState({
      formFields: { ...this.state.formFields, studentPin: e.target.value }
    });
  };

  onCNICChange = (propertyName, e) => {
    this.setState({
      formFields: { ...this.state.formFields, cnic: e.target.value }
    });
  };

  onPasswordChange = (propertyName, e) => {
    this.setState({
      formFields: { ...this.state.formFields, password: e.target.value }
    });
  };



<InputField
        type="text"
        name="student_pin"
        value={this.state.formFields.studentPin}
        placeholder="Student Pin"
        onChange={this.onStudentPinChange.bind(this, "studentPin")}
        faClassName="fa-user"
      />

I would like only to have one function that updates all three fields just using that properName

Regards

You could create a code snippet in the editor, and paste your javascript code there. Aside from that, ensure that your code is properly indented, and you could also surround it with three backticks like ``` — Keno
– Keno, Commented Jan 26, 2019 at 19:09
Make sure you do what the message says. Also make sure the code block is preceded by a blank line. Also scroll through the whole input to make sure there are no "left overs" you overlooked. — trincot
– trincot, Commented Jan 26, 2019 at 19:21
thanks trincot and Keno Clayton I eventually have it posted with your help and suggestions — Muhammad Sharif
– Muhammad Sharif, Commented Jan 26, 2019 at 19:26

Win · Accepted Answer · 2019-01-26 19:27:45Z

1

Welcome to StackOverflow. You can achieve this by wrapping property name around brackets so that it evaluates the key as a variable and not actually propertyName.

onStudentPinChange = (propertyName, e) => {
    this.setState({
        formFields: {
            ...this.state.formFields,
            [propertyName]: e.target.value
        }
    });
};

answered Jan 26, 2019 at 19:27

Win

5,5942 gold badges18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React using method parameter as an object key to update state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related