Below is a function in react
For setting a state dynamically we usually do
handleChange: function (e) {
this.setState({[e.target.name]: e.target.value})
}
But if we put the name manually then array is not needed.
handleChange: function (e) {
this.setState({name: e.target.value})
}
Could someone tell why we put the e.target.name in array like syntax when dynamically fetching the name??
That's ES6 syntax, it's called a computed key. See this answer for a bit more detail, but essentially whatever e.target.name is, it'll be set as the object key.
handleChange: function (e) {
this.setState({[e.target.name]: e.target.value})
}
It's the same as doing this in ES5 (more verbose):
handleChange: function (e) {
var state = {};
state[e.target.name] = e.target.value;
this.setState(state);
}
Javascript evaluates the keys of objects as strings. So, [e.target.name] means access the key whose name is the value of e.target.name (cast to a string), while name: is interpreted as the key whose name is 'name'.
