React - How to set onChange to change the props directly?

Question

I have the following code that receives a variable and shows on the screen:

<input type="number" value={this.state.cpf} onChange={this.handleChange} name="name" />

handleChange(event) {
        this.setState({cpf: event.target.value});
      }

handleSignIn(event) {
        alert('A name was submitted: ' + this.state.cpf);
        event.preventDefault();
      }

I want to remove the handleChange, to change the direct props in onChange, I tried this but it did not work:

onChange={this.setState({ cpf: target.value })}

how do I change the onChange value with this.setState?

`onChange={event => this.setState({ cpf: event.target.value })}` should do the trick. — extempl, Nov 17 '18 at 19:06
Your render method should always remain pure. Setting state in the render method t's a very bad practice and is more likely to have side effects — lomse, Nov 17 '18 at 19:10
@lomse I try not to use the onChange method, but I can not type in form, do you know what happens? I want to change the value of the props without having to call a function, because I will use the updated value to make a post in an API. — Hiago Bonamelli, Nov 17 '18 at 20:49

score 1 · Accepted Answer · answered Nov 17 '18 at 19:13

1

onChange here requires a function to be passed where it can inject the event as an argument. In your onChange, target.value will be undefined as there is not reference for value target.

Changing it to following should fix the issue.

onChange={(e) => {this.setState({ cpf: e.target.value})}

In this case the onChange event will have a function where it can pass the event object as e and you can perform your functionality.

answered Nov 17 '18 at 19:13

Pranay Tripathi

1,614
1
16
24

1

Setting state in the render method isn't a good practice since the render method is supposed to be pure – lomse Nov 17 '18 at 19:14
@lomse the state is being set on the execution of the event. Its the similar to assign a handler to the onChange event. – Pranay Tripathi Nov 17 '18 at 19:16
Still a bad practice https://stackoverflow.com/questions/35290245/calling-setstate-in-render-is-not-avoidable – lomse Nov 17 '18 at 19:19
Can you provide an better option for form manipulation here rather than just saying its a bad practice ? The example you have given is very specific to async call or functionalities that have side effects. As far as form manipulation is concern I would say we are fine with using setState here. – Pranay Tripathi Nov 17 '18 at 19:27

score 0 · Answer 2 · answered Nov 17 '18 at 19:10

Like @extempl pointed out, the handleChange event is not called because it's not binded to this so you either have to bind it by using.

There are several ways to solve this, depending on your code conventions, you could just bind the this keyword to the function like such:

onChange={this.handleChange.bind(this)}

or you could execute the function whenever onChange is triggered:

onChange={event () => this.handleChange(event)} // here i use the ES6 arrow function syntax.

NOTE: these are just examples, you could integrate this soulution into your own project

There are several other ways to do it as well, but these are some of the most common, I have provided a link to an article that explains, other methods as well:

https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

score 0 · Answer 3 · answered Nov 17 '18 at 19:39

0

You can do this by using ES6 arrows functions :

onChange={(event) => {
               this.setState({cpf: event.target.value});
          }
}

It work fine... GOOD Luck !

answered Nov 17 '18 at 19:39

Rvector

2,312
1
8
17

React - How to set onChange to change the props directly?

3 Answers3