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?

Solution

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

Comments

[Justin S]

So how would you go about getting just the value? I tried e.value which does give me the selected options value but if i try to set it to part_id nothing gets set

[Joseph D.]

@JustinS, to extract value, you can do this: onChange = ({ value: part_id }) => this.setState({ part_id }). But take note, value prop for Select would require the options to have label and value pair.

[keikai]

@JosephD. Yes, and that's what I mentioned in the answer, the event may be null

[keikai]

Notice that if the select component doesn't have the props isMulti or its value is false. It won't return an array.

[Justin S]

@JosephD. the way you mentioned does work but then I select an option its doesnt show as selected just sets the value for part_id. The select just sticks with the default placeholder message

[Ali Raza]

But, it changes the previous state? How to make it to save the previous state and further add new selections?

[Beren]

Hey keikai, I have approximately same problem like this question, I wanted to pass my react-select values to the backend which i am unable to do so, you can check the question at stackoverflow.com/questions/70921035/… and also check the codesandbox to get the idea that which data i want to sent to the backend through api. here's the link codesandbox.io/s/crazy-wilbur-its1d?file=/src/App.js:0-811