using setState to add a object in nested array

Question

I'm using ireact set state and trying to post data to my object that is nested with arrays.

Here is my default state:

 const [data, setData] = useState({
    working_hours: [
      {
        id: '',
        description: '',
        hours: '',
        price: '',
        total: '',
      },
    ],
    parts: [
      {
        id: '',
        description: '',
        unit: '',
        quanity: '',
        price: '',
        total: '',
      },
    ],
    other: [
      {
        id: '',
        description: '',
        quanity: '',
        price: '',
        total: '',
      },
    ],
  });

So what I want to do is for example push an object to they array working_hours and I don't know how to do it.

Here is my try:

 const handleAdd = () => {
    const test = {
      id: 3,
      description: 'This is a description',
      hours: 4.2,
      price: 500,
      total: 4421,
    };
    setData({ ...data, working_hours: test });
  };

But this is removing the last state and only replacing the first item.

Answer 1

Let us see how your code is working. You have an object which has three attributes working_hours , parts and others (which are all arrays).

Now when you write setData({ ...data, working_hours: test });, what is happening behind the scene is, first you copy all the attributes of data into a new object, then the attribute working_hours is replaced by test.

However, what you really want is to append test to data.working_hours. This is how you do it setData({...data, working_hours:[...data.working_hours, test])

What happens here is, first, a new object is made with all the attributes of the object data. Then a new array is made, which has all the elements of data.working_hours (previous state's working_hours) and test. This array is assigned to working_hours attribute of the new object, and finally this state is assigned to the new object.

Answer 2

You're not far off, but you need to copy both the outer object and the array you're pushing to. It's also important to use the callback form because you're updating state based on existing state, so you want to be sure you have the most up-to-date state:

const handleAdd = () => {
    setData(data => {
        const test = {
            id: 3,
            description: 'This is a description',
            hours: 4.2,
            price: 500,
            total: 4421,
        };
        return {
            ...data,
            working_hours: [...data.working_hours, test]
        };
    });
};

Answer 3

This should work

const handleAdd = () => {
    const test = {
      id: 3,
      description: 'This is a description',
      hours: 4.2,
      price: 500,
      total: 4421,
    };
    const newData = {
      ...data,
      working_hours: [
        ...(data?.working_hours ? data.working_hours : {}),
        test
      ]
    };
    setData(newData);
};