I have jsfiddle Link https://jsfiddle.net/ilikeflex/r2uws1ez/30/
I am trying to set new state by accessing the previous state. I have three different cases where i am trying to update the state but i am not sure why does Case2 and Case 3 does not work. Can you please help me ??
const useState = React.useState;
function Example() {
const [todos, setTodos] = useState([
{id:1,text:'Learn React'},
{id:2,text:'Learn TypeScript'},
{id:3,text:'Learn Java'}
]);
const case1 = () => {
const newItem = {id:3,text:'Learn C++'};
setTodos((prevState) => {
return prevState.concat(newItem);
});
}
const case2 = () => {
const newItem = {id:3,text:'Learn .Net'};
setTodos((prevState) => {
prevState.push(newItem); // I am adding to previous state and returning it
return prevState;
});
}
const case3 = () => {
const newItem = {id:3,text:'Learn C#'};
setTodos((prevState) => {
let result = { ...prevState, newItem }; // using spread operator
return result;
});
}
return (
<div>
<button onClick={case1}>Case 1</button>
<button onClick={case2}>Case 2</button>
<button onClick={case3}>Case 3</button>
<ul>
{todos.map((item) => (
<li key={item.id}>{item.text}</li>
))}
</ul>
</div>
);
}
ReactDOM.render(<Example />, document.getElementById('root'))
To make case 2 work, you need to make a variable out of the prevState first. Then you can push to it and return that new variable.
const case2 = () => {
const newItem = {id:3,text:'Learn .Net'};
setTodos((prevState) => {
const newState = [...prevState]
newState.push(newItem);
return newState;
});
}
For case 3, you made a little mistake by making result an object instead of an array. Change the {} to [] and it should work fine, like this.
const case3 = () => {
const newItem = {id:3,text:'Learn C#'};
setTodos((prevState) => {
let result = [...prevState, newItem ] ;
return result;
});
}
In all the cases, a new array need be to created and returned.
Case 1.
return prevState.concat(newItem); [ concat create a new array ]
Case 2
const newState = [...prevState]; [ Spread Operator creates a new array ]
newState.push(newItem);
return newState;
Case 3
let result = [...prevState, newItem ] ; [ Spread Operator creates a new array and newItem is added simultaneously ]
return result;