Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to update array state in react native?

Tags:

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

like image 625
John Avatar asked Feb 03 '17 17:02

John


People also ask

How do I change state array in React hooks?

We simply, use the update method (In our example it's setMyArray() ) to update the state with a new array that's created by combining the old array with the new element using JavaScript' Spread operator.

How do I change the state object in react native?

State can hold any kind of JavaScript value, including objects. But you shouldn't change objects that you hold in the React state directly. Instead, when you want to update an object, you need to create a new one (or make a copy of an existing one), and then set the state to use that copy.

How do you add a value to an array state in react native?

Use the spread syntax to push an element into a state array in React, e.g. setNames(current => [... current, 'Carl']) . The spread syntax (...) will unpack the existing elements of the state array into a new array where we can add other elements. Copied!

How does array handle state in React?

Arrays in React State export default App; As mentioned, the initial array state is done in the React component's constructor and afterward used within the render() method to display it. Every time the state changes, the render method will run again and display the correct state in your browser.


2 Answers

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 }); 
like image 79
Mayank Shukla Avatar answered Sep 21 '22 18:09

Mayank Shukla


Try this using create function

onEditComparatorClicked(i) {    let editableComparatorIndexes = [...this.state.markers];    editableComparatorIndexes[i] = 1;    this.setState({editableComparatorIndexes}); } 
like image 30
Sujal Patel Avatar answered Sep 18 '22 18:09

Sujal Patel