/Javascript/React/How to update react state array

How to update react state array

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

How to update react state array

const [array, setArray] = useState([1, 2, 3])

// Add
setArray(prevArray => [...prevArray, 4]); // -> [1, 2, 3, 4]

// Remove last entry
setArray(prevArray => prevArray.splice(0, prevArray.length - 1)); // -> [1, 2, 3]

Similar codes

0 vote189 views2 answers
How to convert time to users timezone in react
Javascript React
3 votes152 views1 answer
Latest react version npm
Javascript React
14 votes142 views3 answers
Cannot resolve react-router-dom
Javascript React
0 vote159 views1 answer
How to change currency in react-paypal-button-v2
Javascript React
1 vote147 views2 answers
Upload image react
Javascript React
0 vote150 views1 answer
Cannot find module '@babel/runtime-corejs2/helpers/interoprequiredefault' in react native
Javascript React
0 vote158 views1 answer
Popup react now ui
Javascript React
0 vote157 views1 answer
Formdata append react js
Javascript React
0 vote137 views1 answer
How to change style class by using onclick function with multiple buttons in react js
Javascript React
18 votes151 views4 answers
React for loop in render
Javascript React