React | Update State | using spread and array.push to update array

Question

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'))

Aaron Claes · Accepted Answer · 2022-02-13 14:34:49Z

3

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;
   });
  
  }

answered Feb 13, 2022 at 14:34

Aaron Claes

711 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Raj Over a year ago

Thank you Aron for making Case 2 and Case 3 work. But in Case 2 why i need to create a new variable. In case 1 also i am not making new variable.

Aaron Claes Over a year ago

@Raj .concat(value) returns a new array with the value added to it. But .push(value) changes the existing array and does not return a new array.

Raj Over a year ago

@Aron Make sense. It is always new array need to be created

Raj · Accepted Answer · 2022-02-14 05:45:30Z

-1

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;

edited Feb 14, 2022 at 5:45

answered Feb 13, 2022 at 14:46

Raj

371 silver badge5 bronze badges

1 Comment

Faisal Nazik Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

React | Update State | using spread and array.push to update array

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related