/Javascript/React/React native update state array of objects

React native 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

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

Update object in array state react

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

-1

Source: dev.to

Similar codes

40 votes368 views4 answers
What does useref do react
Javascript React
5 votes366 views1 answer
React native import svg image
Javascript React
0 vote370 views1 answer
React bootstrap carousel caption placement top
Javascript React
142 votes612 views3 answers
Install react app
Javascript React
14 votes410 views4 answers
React how to update state array
Javascript React
2 votes450 views2 answers
Set delay react native
Javascript React
1 vote377 views1 answer
Font awesome react native icons
Javascript React
0 vote369 views1 answer
Nice react native shadow
Javascript React
10 votes329 views1 answer
That is neither a react function component nor a custom react hook function. react component names must start with an uppercase letter. react hook names must start with the word "use"
Javascript React
8 votes334 views4 answers
Props react
Javascript React