I was looking through some code while using the npm package React-Select

Interestingly enough i saw setState being used as such:

handleSelectChange (value) {
        console.log('You\'ve selected:', value);
        this.setState({ value });
    },

How does setState work like this? It only provides one value? I am asking because I would like to perhaps capture one thing from my input and then change it. But that doesn't work as intended.

handleSelectChange (value) {
        console.log('You\'ve selected:', value);
        this.setState({ value.name });
    },

The full code is here, its fairly short: .js

I was looking through some code while using the npm package React-Select

Interestingly enough i saw setState being used as such:

handleSelectChange (value) {
        console.log('You\'ve selected:', value);
        this.setState({ value });
    },

How does setState work like this? It only provides one value? I am asking because I would like to perhaps capture one thing from my input and then change it. But that doesn't work as intended.

handleSelectChange (value) {
        console.log('You\'ve selected:', value);
        this.setState({ value.name });
    },

The full code is here, its fairly short: https://github./JedWatson/react-select/blob/master/examples/src/ponents/Multiselect.js

• javascript
• node.js
• reactjs
• state
• reactjs-flux

Share Improve this question Follow asked Jul 6, 2016 at 23:24 ApathyBearApathyBear 9,6251515 gold badges5959 silver badges9090 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

When using in ES6

this.setState({ value })

It is just a shorthand for

this.setState({ value: value })

There's nothing else magical happening here

---

For more clarity, consider this example

var x = 5
var y = 10
var z = { x, y }
console.log(z)
//=> { x: 5, y: 10 }

---

If you want to set the state to value.name you would not be able to use the shorthand if the key you had to set was still called value

this.setState({ value: value.name })

This is a ES2015 feature, the property name shorthand. It saves you from typing the name of the key when you are assigning it the value of a variable of the same name.