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
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.
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.
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!
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.
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 });
Try this using create function
onEditComparatorClicked(i) { let editableComparatorIndexes = [...this.state.markers]; editableComparatorIndexes[i] = 1; this.setState({editableComparatorIndexes}); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With