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?

keikai · Accepted Answer · 2020-03-06 01:58:02Z

10

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

edited Mar 6, 2020 at 1:58

answered Mar 4, 2020 at 4:40

keikai

15.3k10 gold badges56 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Justin S Over a year ago

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. Over a year ago

@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 Over a year ago

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

Justin S Over a year ago

@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 Over a year ago

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

|

vamshi krishna · Accepted Answer · 2020-03-04 05:45:07Z

0

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

answered Mar 4, 2020 at 5:45

vamshi krishna

2,9771 gold badge13 silver badges18 bronze badges

1 Comment

keikai Over a year ago

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

Rahul Dasgupta · Accepted Answer · 2022-03-09 03:32:41Z

0

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

answered Mar 9, 2022 at 3:32

Rahul Dasgupta

84915 silver badges19 bronze badges

Collectives™ on Stack Overflow

Passing value to state using react-select

3 Answers 3

Update

For your situation (single selection)

For multiple selections

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

For your situation (single selection)

For multiple selections

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related