/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

0 vote223 views1 answer
POST http://localhost:3000/$(process.env.REACT_APP_API_URL)/auth/users/ 404 (Not Found) in react redux
Javascript React
0 vote236 views1 answer
React-native-redux login example github
Javascript React
71 votes272 views5 answers
Css react
Javascript React
0 vote207 views1 answer
Native module reactnativepushnotification tried to override rnpushnotification
Javascript React
3 votes184 views4 answers
Add new array at the back of react state
Javascript React
20 votes207 views6 answers
Build apk react native
Javascript React
105 votes226 views3 answers
React bootstrap do you need to import
Javascript React
0 vote223 views2 answers
Go back to screen with params react native
Javascript React
0 vote223 views1 answer
Smooth scroll react
Javascript React
4 votes202 views2 answers
React materilize
Javascript React