React-select: Select component isnt pre-populating data

[Kannaj]

I have a component which either retrieves state on ajax call or is prepopulated with props sent to this.
this is my component state

  constructor(props){
    super(props);
    this.state={
      name:"" || this.props.project_name,
      description:"" || this.props.project_description,
      link:"" || this.props.project_link,
      category:"" || this.props.project_category,
      skill:[],
      errors:{}
    }
  }

I am using react-select for the category input

<Select.Async name="project_category"
              loadOptions={this.getOptions.bind(this,'category')}
              onChange={this.handleChange.bind(this,'category')}
              value={this.state.category} />

the handleChange handler goes like this

  handleChange(name,input){
    if(name=='category'){
      this.setState({[name]:input.value})
    }else{
      this.setState({[name]:input})
    }
  }

in the first instance (retrieving via ajax call) - i'm able to select a value on the category field. the state gets changed from " " to the required input and i'm able to see the selected value in the input box

but i sometimes want to pre-populate the category field. this time , the prepopulated value doesnt show up in the input box. nor are any further selections - where am i going wrong?

[Ashwin2488]

Am having the same requirement. I want to prepopulate the select in edit mode. Did you find any workaround?

[Kannaj]

you have to fill your state in this way

this.setState({category: {value: 'foo',label: 'bar'})

i.e the state value needs to be an object with the value and label property. at least this worked for me. Hope that helps