Search code examples
reactjsinputsetstate

What does the bracket mean in this situation in React?

This is a form component in React. I am wondering what does the bracket [ ] mean in that onChange event? Besides, I am a little confused that what does e.target.name equal to? Is that a string "inputText"?

<form onSubmit={(e) => {
 e.preventDefault();
 const data = [...this.state.inputText];
 this.setState({data, inputText: ''});
}}>
<input
  type="text"
  name="inputText"
  value={this.state.inputText}
  onChange={(e) => {
    this.setState({[e.target.name]: e.target.value})
  }}
 />
</form>

Any comment or help will be appreciated, thanks.

Solution

  • Computed property names

    It's one of new things in ES6. It means that you can set key values for the object dynamically.

    example:

    // Computed property names (ES2015)
var prop = 'foo';
var o = {
  [prop]: 'hey',
  ['b' + 'ar']: 'there'
};

    read more about it here