add object to array useState code example
Example 1: usestate array push
setTheArray([...theArray, newElement]);
Example 2: How to add object in an array using useState
import React, { useState } from 'react';
function App() {
const [items, setItems] = useState([]);
const addMoreItem = () => {
setItems(prevItems => [...prevItems, {
id: prevItems.length,
value: getRandomNumber()
}]);
}
const getRandomNumber = () => {
return Math.random().toString().substring(2, 8);
}
return (
<div classname="App">
<h3>useState with an array in React Hooks - <a href="https://www.cluemediator.com">Clue Mediator</a></h3>
<br>
<button onclick="{addMoreItem}">Add More</button>
<br><br>
<label>Output:</label>
<pre>{JSON.stringify(items, null, 2)}</pre>
</div>
);
}
export default App;
Example 3: functional component how to add to existing array react
const {useState, useCallback} = React;
function Example() {
const [theArray, setTheArray] = useState([]);
const addEntryClick = () => {
setTheArray([...theArray, `Entry ${theArray.length}`]);
};
return [
<input type="button" onClick={addEntryClick} value="Add" />,
<div>{theArray.map(entry =>
<div>{entry}</div>
)}
</div>
];
}
ReactDOM.render(
<Example />,
document.getElementById("root")
);
Example 4: add object to array setstate
To push to the beginning of the array do it this way
this.setState( prevState => ({
userFavorites: [{id: 3, title: 'C'}, ...prevState.userFavourites]
}));
Example 5: add object to array react hook
setTheArray([...theArray, newElement]);