Input not changing state REACTJS

Question

The input doesn't change it's text. It comes pre-filled from the database. For example, if it comes with the text: example, if I press for example the s key, it console logs examples but in the DOM in is still example. Here is the handle code:

handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
    console.log(event.target.name);
    console.log(event.target.value);
  };

and the input field:

<input 
  type="text" 
  className="form-control" 
  name="note" 
  id=" note" 
  value={this.state.insurance.note} 
  onChange={this.handleChange}
/>

EDIT (fixed the render problem, but I don't get the data that I want when I submit the form) Here is the code for my form:

handleSubmit = event => {
    event.preventDefault();
    var state = this.state;
    axios
      .put(`${API_URL}/` + state.id + `/update`, {
        tip: state.tip,
        date_exp: state.date_exp,
        date_notif: state.date_notif,
        note: state.note
      })
      .then(response => {
        console.log(response.data);
        // window.location = "/view";
      })
      .catch(error => {
        console.log(error);
      });
  }

and my button is a simple submit button:

<button className="btn btn-success" type="submit">Save</button>

Jolly · Accepted Answer · 2019-03-18 12:52:36Z

2

imjared's answer is correct: your problem is in the handleChange function, where you wrongly update the state.
That function should be something like the following one:

handleChange = event => {
    const insurance = Object.assign({}, this.state.insurance);
    insurance[event.target.name] = event.target.value;

    this.setState({insurance});
  };

In the first line of the function, you create a deep copy of the current object insurance saved in the state. Then, you update the copied object, and finally update the state.

answered Mar 18, 2019 at 12:52

Jolly

1,7883 gold badges22 silver badges46 bronze badges

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

5 Comments

user11011546 Over a year ago

The thing is that now when I submit the form, it console.loges and empty object... Before it console.loged and object with the fileds that i have modified...

Jolly Over a year ago

could you please post also the code of your submit button? :)

Jolly Over a year ago

Well, if you mean that the console.log(response.data) returns an empty object, that depends on the fetch that is not working correctly. By looking at your request, I do wonder: isn't by, any chance, that you should have written state.insurance.date_exp, state.insurance.date_notif instead of state.date_exp... ? I mean, before you handled the change on the insurance object, but in that request it seems that you do not have any insurance object in the state

user11011546 Over a year ago

Yeah, you're right, so sorry for the dumb question... That was it... Thank you so much!!

user11011546 Over a year ago

Thanks, you too! ;)

imjared · Accepted Answer · 2019-03-18 12:48:40Z

2

You're changing this.state.note based on the name property of your input so it makes sense that this.state.insurance.note wouldn't see any updates.

If you try console.logging this.state above your <input>, I bet you'll see what you're after.

answered Mar 18, 2019 at 12:48

imjared

20.7k4 gold badges56 silver badges76 bronze badges

Collectives™ on Stack Overflow

Input not changing state REACTJS

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related