Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select component isnt pre-populating data #1118

Closed
Kannaj opened this issue Jul 25, 2016 · 2 comments
Closed

Select component isnt pre-populating data #1118

Kannaj opened this issue Jul 25, 2016 · 2 comments

Comments

@Kannaj
Copy link

Kannaj commented Jul 25, 2016

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
Copy link

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

@Kannaj
Copy link
Author

Kannaj commented Dec 30, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants