update array of json in react js state

Question

I have a multiselect dropdown. whenever I select an option I need to add that data to state. when I click the first option I get data like

[{id:"1", name:"Ind"}]

when I click the second option I get data like (currently two options are selected)

[{id:"1", name:"Ind"}, {id:"2", name:"Aus"}]

this.state = {
    selectedCountries: []
};

in the onChange of multiselect I call the below function

handleChange = (options) => {
    var output = [];
    if(options !== null && options !== undefined){
        console.log(options); //    [{id:"1", name:"Ind"}, {id:"2", name:"Aus"}]
        this.setState(prevState => {
            selectedCountries:options
        });
    }
};

Its not working.

I am expecting it like this

selectedCountries:[
    {
        id:"1",
        name:"Ind"
    },
    {
        id:"2",
        name:"Aus"
    }
]

How to achieve this through reactjs?

Change this.setState(prevState => { selectedCountries:options }); to this.setState({selectedCountries: options}) — cdoshi
– cdoshi, Commented Dec 27, 2017 at 12:00

Shubham Khatri · Accepted Answer · 2017-12-27 12:04:28Z

3

Your setState syntax is incorrect

    this.setState({
        selectedCountries:options
    });

You need to make use of updater function only when you need to update the state based on the previous state and in that case you need to return an object from the updater function which you aren't doing

It would look like

    const newlyAddedOption = {id:"3", name:"UK"}
    this.setState(prevState => {
        return { selectedCountries:[...prevState.selectedCountries, newlyAddedOption]}
    });

or

    const newlyAddedOption = {id:"3", name:"UK"}
    this.setState(prevState => ({
        selectedCountries: [...prevState.selectedCountries, newlyAddedOption]
    }));

However this isn't currently useful to you since you get all the options together at once.

edited Dec 27, 2017 at 12:04

answered Dec 27, 2017 at 12:02

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

4 Comments

Developer Strange Over a year ago

if i select 3 options only 2 values are updated in the state. what could be the reason?

Shubham Khatri Over a year ago

Are you logging those after setting state. You might want to check this as well stackoverflow.com/questions/41278385/…

Developer Strange Over a year ago

when i select a new option i ll get all the selected data like [{id:"1", name:"Ind"}, {id:"2", name:"Aus"}]

Shubham Khatri Over a year ago

Did you check the question that I linked in my above comment

Collectives™ on Stack Overflow

update array of json in react js state

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related