/Javascript/React/React update state array of objects

React update state array of objects

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

Update object in array state react

const handleAdd = (todo) => {
  const newTodos = [...todos];
  newTodos.push(todo);
  setTodos(newTodos);
}

Source: dev.to

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

2 votes214 views4 answers
Date range picker react
Javascript React
5 votes168 views1 answer
Add icon material ui
Javascript React
23 votes254 views6 answers
React hooks useeffect
Javascript React
1 vote214 views1 answer
Interpolation react
Javascript React
13 votes216 views5 answers
React native setup
Javascript React
0 vote229 views1 answer
What was the reaction of others bostonh tea party
Javascript React
1 vote201 views1 answer
React best way of forcing component to update
Javascript React
160 votes807 views6 answers
React install
Javascript React
10 votes216 views4 answers
Attempted import error 'switch' is not exported from 'react-router-dom'. in react js
Javascript React
0 vote223 views1 answer
Unable to resolve "@react-native-community/masked-view" from
Javascript React