CODEWITHSUNDEEP
javascriptreactjsstate
psudo
psudo

Reputation: 1578

Update state in React

Below is the code from my app that I've been building while learning React. I want to update the state. With the following code both object gets the same value. I want to to update the state with the one function.

How do I do that ?

JS

state = {
  fname: 'jonny',
  lname: 'deep'
}

inputChangeHandler = (event) => {
  this.setState({
    fname: event.target.value,
    lname: event.target.value
  });
};

render() {
  return (...);
}

HTML

<div className="form-inline">
   <label className="sr-only" for="inlineFormInputName2">First Name</label>
   <input type="text" className="form-control mb-2 mr-sm-2" id="inlineFormInputName2" value={this.state.fname} onChange={inputChangeHandler} />
   <label className="sr-only" for="inlineFormInputGroupUsername2">Last Name</label>
   <div className="input-group mb-2 mr-sm-2">
      <input type="text" className="form-control" id="inlineFormInputGroupUsername2" value={this.state.lname} onChange={inputChangeHandler} />
   </div>
</div>

Upvotes: 1

Views: 154

Answers (3)

MD. Sani Mia
MD. Sani Mia

Reputation: 292

You should use the name attribute in your input filed for update your state smartly.

<div className="form-inline">
   <label className="sr-only" for="inlineFormInputName2">
   First Name
   </label>
   <input type="text" className="form-control mb-2 mr-sm-2" id="inlineFormInputName2" name="fname" value={this.state.fname} onChange={inputChangeHandler} />
   <label className="sr-only" for="inlineFormInputGroupUsername2">
   Last Name
   </label>
   <div className="input-group mb-2 mr-sm-2">
      <input type="text" className="form-control" id="inlineFormInputGroupUsername2" value={this.state.lname} name="lname" onChange={inputChangeHandler} />
   </div>
</div>

Now you can update your state.

state = {
  fname: 'jonny',
  lname: 'deep'
}

inputChangeHandler = (event) => {
  this.setState({
    [event.target.name]: event.target.value,
  })
}

Upvotes: 2

Shubham Verma
Shubham Verma

Reputation: 5054

I am assuming you are asking in class based way to utilise common function to update value. First you have to do only update those value whose input value will change. This you can do by assigning input name

<div className="form-inline">
        <label className="sr-only" for="inlineFormInputName2">
        First Name
      </label>
      <input type="text" name="fname" className="form-control mb-2 mr-sm-2" id="inlineFormInputName2" value={this.state.fname} onChange={this.inputChangeHandler} />

      <label className="sr-only" for="inlineFormInputGroupUsername2">
        Last Name
      </label>
    <div className="input-group mb-2 mr-sm-2">
      <input name="lname" type="text" className="form-control" id="inlineFormInputGroupUsername2" value={this.state.lname} onChange={this.inputChangeHandler} />
    </div>

After that you can use these values in on inputChangeHandler function like this:

inputChangeHandler = (event) => {
    //update input change value
    const newValues = { ...this.state,
      [event.target.name]: event.target.value 
    };

  //You have done this mistake. you are setting object inside state instead you //need its value for this you need to spread object
    this.setState({
      ...newValues 
    });
  };

Here is demo: https://codesandbox.io/s/vibrant-franklin-67c6h

Last but not least. Try to understand logic by yourself instead directly copying. It will help you in long run. :-)

Upvotes: 0

nwillo
nwillo

Reputation: 1294

I haven't tested it. But it should work. I added a data attribute to identify the input. And used that to update the state.

state = {
  fname: 'jonny',
  lname: 'deep'
}

inputChangeHandler = (event) => {

  const element = event.currentTarget;
  const type = element.dataset.type;

  const newState = this.state;

  newState[type] = element.value;

  this.setState({
    ...newValues
  });
};
render() {
  return (...);
}

<div className="form-inline">
  <label className="sr-only" for="inlineFormInputName2">
            First Name
          </label>
  <input type="text" className="form-control mb-2 mr-sm-2" id="inlineFormInputName2" value={this.state.fname} onChange={inputChangeHandler} data-type="fname"/>

  <label className="sr-only" for="inlineFormInputGroupUsername2">
            Last Name
          </label>
  <div className="input-group mb-2 mr-sm-2">
    <input type="text" className="form-control" id="inlineFormInputGroupUsername2" value={this.state.lname} onChange={inputChangeHandler} data-type="lname"/>
  </div>

Upvotes: 0

Related Questions