Using a single handleInputChange method to for multiple input fields (React)

Question

I have a form, in React"

render() {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
          <input
            value={this.state.first}
          />

          <input
            value={this.state.second}
          />

          <input
            value={this.state.third}
          />
           //.... many more
        </form>
     //...
)}

My handleInputChange usually looks like this:

  handleInputChange(e) {
    this.setState({value: e.target.value });
  }

Now, since I have many different input fields, i would normally do many different handleInputChange methods. However, all of these handle input change things basically do the same: they set the state anew, according to which input field is currently edited.

How could I, instead of writing three handleInputChange methods each doing something like:

  handleInputChangeFirst(e) {
    this.setState({first: e.target.value });
  }
  handleInputChangeSecond(e) {
    this.setState({second: e.target.value });
  }

... do all of this with one single handleInputChange, which then checks which value needs to be updated? How can i let handleInputChange know about the input field that is being edited and react accordingly?

Bertrand Marron · Accepted Answer · 2017-05-14 00:08:56Z

3

You could have a generic handleInputChange method:

handleInputChange(property) {
  return e => {
    this.setState({
      [property]: e.target.value
    });
  };
}

That you’d use as such:

<input
  value={this.state.first}
  onChange={this.handleInputChange('first')}
/>

answered May 14, 2017 at 0:08

Bertrand Marron

22.3k8 gold badges63 silver badges95 bronze badges

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

4 Comments

George Welder Over a year ago

would i not give my handleInputChange the event anymore then?

Bertrand Marron Over a year ago

this handleInputChange returns a function that does take the event as sole argument. it's basically a factory for handlers.

George Welder Over a year ago

interesting! Why would I have to change it this way, or why did you decide to do so?

Bertrand Marron Over a year ago

I’m not saying that you have to change it this way :) but this does answer your issue doesn’t it? with this you only have one function that works for multiple fields.

Abi · Accepted Answer · 2019-04-25 16:24:00Z

2

Correct me if I'm wrong, but wouldn't the above method return a new function for each render? So if you pass these handlers down to a child component then they'd be seen as an updated prop every time instead of the same prop (cause it's a new function every render), and cause an unwanted re-render of the child. One of the reasons inline functions are hated in the render method.

Here's another solution I saw somewhere online:

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

And the input element:

<input name="first" value={this.state.first} onChange={this.handleInputChange} />

Name might not be the best attribute to use, but you get the point

edited Apr 25, 2019 at 16:24

answered Apr 25, 2019 at 16:18

Abi

213 bronze badges

Collectives™ on Stack Overflow

Using a single handleInputChange method to for multiple input fields (React)

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related