TIL... How to handle User input with a generic function

While writing a CRUD screen with validation in React, I found I was writing similar, if not the same state-altering functions for each input box. Some functions needed additional validation while others did not. After discussing some team-members, the suggestion was made to use the following:

1
2
3
4
5

handleUserInput(e) {
 const name = e.target.name;
 const value = e.target.value;
 this.setState({ [name]: value });
}

Paired with code like this for the inputs:

1
2
3
4
5
6
7

<TextInput
 id="saleName"
 name="saleName"
 placeholder={''}
 value={this.state.saleName}
 onChange={this.handleUserInput}
/>

Then just set the name property on the tag to the same property name in state.