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

2018-05-01

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.