How to update array state in react native?

Question

I am trying to update only one element in an array state but i am not sure of how to do it.

State

constructor(props) {
    super(props);
    this.state = {
        markers: [],
    };
}

Setting the state

 setCurrentLocation() {
    var root = this;
    root.setState({
        markers: [
            ...root.state.markers,
            {
                coordinate: {
                    latitude: parseFloat(root.state.currentLat),
                    longitude: parseFloat(root.state.currentLon)
                },
                key: root.state.currentLat,
                image: pinCurrentLocation

            },
        ],
    });
}

If i want to change the key in the fourth element of marker, how do i do that?

Thanks

This question helped me to define array on the state. Thank you @John — raza9798
– raza9798, Commented Jul 23, 2020 at 12:17

Mayank Shukla · Accepted Answer · 2018-02-27 19:28:32Z

58

Important point is, we should not mutate the state array directly, always do the changes in new array and then use setState to update the state value.

As suggested by Doc:

Never mutate this.state directly, Treat this.state as if it were immutable.

Basic flow of updating a state array is:

1- First create the copy of state array.

2- Find index of the item (if index is available skip this one).

3- Update the value of item at that index.

4- Use setState to update the state value.

Multiple solutions are possible:

1- Use array.map and check which element you want to update, when you find that element return a new object for that with updated key value otherwise just return the same object. Like this:

let newMarkers = markers.map(el => (
      el.name==='name'? {...el, key: value}: el
))
this.setState({ markers });

2- We can also use array.findIndex to find the index of that particular item, then update the values of that item. Like this:

let markers = [...this.state.markers];
let index = markers.findIndex(el => el.name === 'name');
markers[index] = {...markers[index], key: value};
this.setState({ markers });

Loop will be not required if we know the index of the item, directly we can write:

let markers = [ ...this.state.markers ];
markers[index] = {...markers[index], key: value};
this.setState({ markers });

edited Feb 27, 2018 at 19:28

answered Feb 3, 2017 at 17:14

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

9 Comments

prosti Over a year ago

This is not a good method @MayankShukla, this should be always done based on keys.

natsumiyu Over a year ago

i tried this but I'm having undefined is not an object (evaluating 'cd[i].val = text') how to solve this? here's my question stackoverflow.com/questions/43197537/… thank you

Mayank Shukla Over a year ago

@mori which way u tried, can you show your code, will help you :)

natsumiyu Over a year ago

@MayankShukla i tried this 'markers[index].key = /*new value*/ 'abc';' thank you!

Mayank Shukla Over a year ago

what is the name of key, here i just referenced key as any key of the object that u want to update. can you show ur array ?

|

Sujal Patel · Accepted Answer · 2017-11-16 06:48:47Z

4

Try this using create function

onEditComparatorClicked(i) {
   let editableComparatorIndexes = [...this.state.markers];
   editableComparatorIndexes[i] = 1;
   this.setState({editableComparatorIndexes});
}

answered Nov 16, 2017 at 6:48

Sujal Patel

2,5402 gold badges21 silver badges40 bronze badges

Comments

Omar bakhsh · Accepted Answer · 2020-08-18 04:08:56Z

1

state

this.state = {
          barcodeArray:['']
        };

update array

var barcode_text='hi';
 this.setState({ barcodeArray:[...this.state.barcodeArray,barcode_text] })}

answered Aug 18, 2020 at 4:08

Omar bakhsh

1,09214 silver badges21 bronze badges

Comments

Rajnikant Lodhi · Accepted Answer · 2020-01-13 06:32:49Z

0

I am trying to push value in an array state and set value like this and define state array and push value by map function.

 this.state = {
        createJob: [],
        totalAmount:Number=0
    }


 your_API_JSON_Array.map((_) => {
                this.setState({totalAmount:this.state.totalAmount += _.your_API_JSON.price})
                this.state.createJob.push({ id: _._id, price: _.your_API_JSON.price })
                return this.setState({createJob: this.state.createJob})
            })

edited Jan 13, 2020 at 6:32

answered Jan 13, 2020 at 6:24

Rajnikant Lodhi

5585 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to update array state in react native?

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related