Passing value to state using react-select

1
votes

I'm new to react and trying to learn on my own. I started using react-select to create a dropdown on a form and now I'm trying to pass the value of the option selected. My state looks like this.

this.state = {
  part_id: "",
  failure: ""
};

Then in my render

const {
  part_id,
  failure
} = this.state;

My form looks has 2 fields

<FormGroup>
  <Label for="failure">Failure</Label>
  <Input
    type="text"
    name="failure"
    placeholder="Failure"
    value={failure}
    onChange={this.changeHandler}
    required
    />
  </FormGroup>
  <FormGroup>
  <Label for="part_id">Part</Label>
  <Select
    name="part_id"
    value={part_id}
    onChange={this.changeHandler}
    options={option}
  />
  </FormGroup>

the changeHandler looks like this

changeHandler = e => {
  this.setState({ [e.target.name]: e.target.value });
};

The change handler works fine for the input but the Select throws error saying cannot read property name. I went through the API docs and came up with something like this for the Select onChange

onChange={part_id => this.setState({ part_id })}

which sets the part_id as a label, value pair. Is there a way to get just the value? and also how would I implement the same with multiselect?

2
javascripthtmlreactjsreact-select

2 Answers

6
votes

The return of react-select onChange event and the value props both have the type as below

event / value: 

null | {value: string, label: string} | Array<{value: string, label: string}>

So what the error means is that you can't find an attribute of null (not selected), or any attributes naming as name (you need value or label)

For multiple selections, it returns the sub-list of options.

You can find the related info in their document

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

Update

For your situation (single selection)

  • option having type as above
const option = [
  {value: '1', label: 'name1'},
  {value: '2', label: 'name2'}
]
  • state save selected value as id
changeHandler = e => {
  this.setState({ part_id: e ? e.value : '' });
};
  • pick selected option item via saved id
  <Select
    name="part_id"
    value={option.find(item => item.value === part_id)}
    onChange={this.changeHandler}
    options={option}
  />

For multiple selections

  • state save as id array
changeHandler = e => {
  this.setState({ part_id: e ? e.map(x => x.value) : [] });
};
  • pick via filter 
  <Select
    isMulti // Add this props with value true
    name="part_id"
    value={option.filter(item => part_id.includes(item.value))}
    onChange={this.changeHandler}
    options={option}
  />
0
votes

onChange function is a bit different in react-select

It passes array of selected values, you may get first one like

 onChange={([selected]) => {
    // React Select return object instead of value for selection
    // return { value: selected };
    setValue(selected)
 }}