How to push new column into array using setState

Question

I am using an external library to build a Taskboard and what I want to achieve is to add a new column when clicking and add column button. I am struggling with adding the column, I have the newly created column but it doesn't get added to the array. What am I doing wrong and how can I insert the newly created column? Here is my code:


  onAddColumn = () => {
    const newColumn: TaskBoardColumnModel = {
      id: this.state.columnsData.length + 1,
      title: 'New Column',
      status: 'new',
      edit: true,
    };

    console.log(this.state.columnsData);

    this.setState({
      columsData: newColumn,
    });
    console.log(this.state.columsData);
  };
}

columsData vs columnsData?

Ben Stephens
– Ben Stephens

2022-05-18 18:07:43 +00:00
Commented May 18, 2022 at 18:07 — Ben Stephens
– Ben Stephens, Commented May 18, 2022 at 18:07

Trisma · Accepted Answer · 2022-05-19 10:54:37Z

1

Your main issue is the way you update your state. This is what you have:

this.setState({
      columsData: newColumn,
    });

This piece of code will set the state to columsData: newColumn, which is wrong for a few reasons:

columsData should be columnsData
Your piece of code will remove all the other columns and replace it with only one. Which will fail the code because columnsData will become an object and not an array

Here is what it should be:

this.setState({
      columnsData: [...this.state.columnsData, newColumn],
    });

This will keep your current state, and add the new column to your existing list.

edited May 19, 2022 at 10:54

answered May 18, 2022 at 18:14

Trisma

7637 silver badges21 bronze badges

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

6 Comments

Ben Stephens Over a year ago

Pretty sure you don't need ...this.state, : reactjs.org/docs/…

Trisma Over a year ago

@BenStephens Is this a new feature, or only for class based components? The last time I used these in function components I remember the need for this.

Ben Stephens Over a year ago

Pretty sure it doesn't work like that for functional components' state updates, but there you can have multiple state variables (if you want them). I don't use class components so not sure when it was added, but it was there in 17: 17.reactjs.org/docs/…

Trisma Over a year ago

@BenStephens See the note here: reactjs.org/docs/hooks-reference.html#functional-updates. It's a function component thing it seems, so code can be simplified indeed

Ben Stephens Over a year ago

In that case, your second bullet point "You are overwriting the whole state with only your columns" seems like it's probably wrong to me.

|

Ben Stephens · Accepted Answer · 2022-05-18 18:12:33Z

0

You have a typo in columsData. Additionally columnsData should be an array so you probably need to set the new state to the old one plus the new column.

e.g. something like:

this.setState({
    columnsData: [...this.state.columnsData, newColumn],
});

answered May 18, 2022 at 18:12

Ben Stephens

3,3711 gold badge7 silver badges9 bronze badges

Comments

Sajjad · Accepted Answer · 2023-07-21 11:48:52Z

It looks like there is a typo in your code. The property you are updating in setState is columsData instead of columnsData. Due to this typo, the new column is not getting added to the array correctly. To fix this, you need to update the setState call to use the correct property name columnsData.

Here's the corrected code:

onAddColumn = () => {
  const newColumn: TaskBoardColumnModel = {
    id: this.state.columnsData.length + 1,
    title: 'New Column',
    status: 'new',
    edit: true,
  };

  console.log(this.state.columnsData);

  this.setState({
    columnsData: [...this.state.columnsData, newColumn],
  });

  console.log(this.state.columnsData);
};

In the setState call, we use the spread operator (...) to create a new array that includes all the existing columns in this.state.columnsData, and then we add the newColumn to the end of the new array.

By doing this, the new column will be correctly added to the columnsData array when you click the "Add Column" button.

Collectives™ on Stack Overflow

How to push new column into array using setState

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related