How to update nested array (multi react-select)

Question

I'm creating an app where I need to store selected values in array nested in object (category below). State looks like:

state = {
    data: {
        user: "",
        title: "",
        text: "",
        category: [], // should store values
    },
    updateNoteId: null,
}

In my render() I have following form:

<form onSubmit={this.submitNote}>
    <Select
        name="category"
        value={this.state.data.category}
        options={options}
        onChange={this.handleMultiChange}
        multi
    />
    <input type="submit" value="Save" />
</form>

Options are:

const options = [
    { value: 1, label: 'one' },
    { value: 2, label: 'two' },
    { value: 3, label: 'three' }
]

So the question is how this.handleMultiChange function should looks like to work. Category[] need to keep all values selected in Select which is react-select component (eg. it should be category = [1,3], when 'one' and 'three' were chosen). I tried many combination but none of them worked so far. I prefer to use ES6 without any external libraries/helpers to do that.

Show what you have tried as a minimal reproducible example along with an explanation of your results. — user1531971
– user1531971, Commented Nov 8, 2018 at 17:09

Charlie · Accepted Answer · 2018-11-09 15:30:17Z

2

handleMultiChange(selectedOptions) {
  this.setState({ 
    data: {
      ...this.state.data, 
      categories: selectedOptions
    }
  })
}

edited Nov 9, 2018 at 15:30

answered Nov 8, 2018 at 17:17

Charlie

2763 silver badges14 bronze badges

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

2 Comments

rafalm Over a year ago

Thanks for response, but it's not working. Console show undefined values and Select seems also to work incorrect... I've prepared codesandbox -> (codesandbox.io/s/6108wxlqxn)

Charlie Over a year ago

Sorry, I didn't know you was using React-Select. Working Code Sandbox - codesandbox.io/s/502qv3qp4k I've also updated my answer

Collectives™ on Stack Overflow

How to update nested array (multi react-select)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related