How to selectively setState for an object with two array of objects?

Question

How would I add new objects to the data: [] using setState() for the following code or replace data entirely??

    const [tableState, setTableState] = useState<TableState>({
    columns: [
      { title: "First Name", field: "firstName" },
      { title: "Last Name", field: "lastName" },
    ],
    data: [
      {
        firstName: "John",
        lastName: "Doe",
      },
      {
        firstName: "Jane",
        lastName: "Doe",
      },
    ],
  });

setState(prevState => ({...prevState.tableState, ???}))

Isaac · Accepted Answer · 2020-10-02 22:10:46Z

2

You are mixing between hooks and conventional setState.

From the above code, you should be updating your state using setTableState function instead.

setTableState(prevState => ({
  ...prevState,
  data: [
    ...prevState.data,
    {
      firstName: 'New FirstName',
      lastName: 'New Last Name'
    }
  ]
}))

answered Oct 2, 2020 at 22:10

Isaac

13k18 gold badges66 silver badges135 bronze badges

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

Comments

T.J. Crowder · Accepted Answer · 2020-10-02 22:15:21Z

Say you have a new user, Joe Bloggs. It would look like this (note that the setter is setTableState — the setter you got from useState — not setState):

setTableState(prevState => ({
    ...prevState, 
    data: [
        ...prevState.data, {
            firstName: "Joe",
            lastName: "Bloggs"
        }
    ]
}));

What that does:

Creates a new object which is a shallow copy of prevState, but
With a new data property, that
Has the original data, plus the new object

But stepping back a bit: That state item is probably too complicated. With hooks and useState, you usually want to keep your state really finely-grained. In this case, I think there are at least two separate state items:

const [columns, setColumns] = useState<ColumnType[]>([
    { title: "First Name", field: "firstName" },
    { title: "Last Name", field: "lastName" },
]);
const [data, setData] = useState<DataType[]>([
    {
        firstName: "John",
        lastName: "Doe",
    },
    {
        firstName: "Jane",
        lastName: "Doe",
    },
]);

And you'd set new data state like this:

setData(data => [
    ...data,
    {
        firstName: "Joe",
        lastName: "Bloggs"
    }
]);

Collectives™ on Stack Overflow

How to selectively setState for an object with two array of objects?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related