Passing value to state using react-select

Question

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?

Answer 1

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)
 }}

Answer 2

I have tried the above solutions but some of these solutions does update the state but it doesn't gets rendered on the Select value instantly.

Herewith a demo example:

this.state = {
          part_id: null,
        };

handleUpdate = (part_id) => {
    this.setState({ part_id: part_id.value }, () =>
        console.log(`Option selected:`, this.state.part_id)
    );
};

const priceOptions = [
    { value: '999', label: 'Item One' },
    { value: '32.5', label: 'Item Two' },
    { value: '478', label: 'Item Three' }
]

<Select
    onChange={this.handleUpdate}
    value={priceOptions.find(item => item.value === part_id)}
    options={priceOptions}
    placeholder={<div>Select option</div>}
/>