React-select: the select doesn't show selected item after the item was clicked

[craigcosmo]

my demo bases on the baisc usage guide, the select doesn't show selected item after the item was clicked. Here is how it looks like

full video of that gif:
http://www.mediafire.com/download/vftvirrvtbltnva/ScreenFlow.mp4

Version: beta14

[nazarlitvin]

This is because you set the value _'one'_ into your select. If you look at options array you can see that object with value 'one' has the label _'One'_, so you have unchanged select. You need to save new state after the item was clicked into component state or redux store if you have one.

This code will work in your case.

export default class Select extends React.Component {
  constructor(props) {
    super(props)
    this.saveChanges = this.saveChanges.bind(this)
    this.state = {
      active: 'one'
    }
  }
  saveChanges(data) {
    this.setState({
      active: data.value
    })
  }
  render() {
    const options = [
      { value: 'one', label: 'One'},
      { value: 'two', label: 'Two'}
    ]
    return(
      <I
        name='sort'
        value={this.state.active}
        options={options}
        onChange={this.saveChanges}
      />
    )
  }
}

I hope it will help.

[Abzoozy]

check your value attribute in Select :) it says "one". It will never change.

but if you change the onChange console.log from val to val.value you will at least see that the selected value is two in your console. If you want the value to be changed you have to create props or state and then pass this state or prop to the value attribute, and finally update this prop or state through your onChange function and it will update the value for you

[bvaughn]

Thanks @nazarlitvin and @Abzoozy for the helpful responses!

Going to close this issue for now since it seems like a logic error in the demo code rather than a react-select bug. Cheers! 😄

[craigcosmo]

@nazarlitvin I have a question, this question is generally about react. The code onChange={this.saveChanges} didn't have data argument pass to it. How come the data available in method saveChanges(data) ?

[bvaughn]

Hey @craigcosmo.

Sounds like a JavaScript question rather than a React question. 😄

In JavaScript you can pass function references around like any other variable. In this case, you're passing a reference to the saveChanges function. Select later calls this function with a value parameter (which can be named whatever you want, in this case data).

Put another way...

// Passes a reference to the saveChanges function
onChange={this.saveChanges}

// Executes the saveChanges function and passes its return value
onChange={this.saveChanges()}

[nazarlitvin]

@craigcosmo react-select takes a function from onChange property and call it with the new value when the last one was selected, so you don't need to wrap this function in another one.

this.props.onChange(value)