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

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

Answer 2

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 3

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