/Javascript/React/React how to update state array

React how to update state array

How to add array data on state react

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

Source: stackoverflow.com

React how to update state array

const initialState = [
    { name: "foo", counter: 0 },
    { name: "far", counter: 0 },
    { name: "faz", counter: 0 }
  ];

const [state, setState] = useState(initialState);

const clickButton = () => {
	// 1. Make a shallow copy of the array
	let temp_state = [...state];
	
	// 2. Make a shallow copy of the element you want to mutate
	let temp_element = { ...temp_state[0] };
	
	// 3. Update the property you're interested in
	temp_element.counter = temp_element.counter+1;
	
	// 4. Put it back into our array. N.B. we *are* mutating the array here, but that's why we made a copy first
	temp_state[0] = temp_element;
	
	// 5. Set the state to our new copy
	setState( temp_state );
}

Source: stackoverflow.com

React native update state array of objects

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

Source: stackoverflow.com

React native update state array of objects

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

Source: stackoverflow.com

Similar codes

1 vote376 views1 answer
React redux actions must be plain objects
Javascript React
0 vote420 views2 answers
React open pdf in new tab
Javascript React
1 vote372 views2 answers
Export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'
Javascript React
0 vote347 views1 answer
Js map vs react js map
Javascript React
0 vote363 views1 answer
React bootstrap col not working
Javascript React
0 vote385 views1 answer
React-native-checkbox in a loop
Javascript React
0 vote452 views1 answer
How to get year in react
Javascript React
0 vote396 views1 answer
React userefrence example
Javascript React
12 votes362 views2 answers
React split array into chunks
Javascript React
11 votes373 views2 answers
React must be in scope when using jsx
Javascript React