Assigning input data into array from multiple input fields gives undefined

I’m trying to assign the input field values into an array. Input fields are text box and date picker, which can be changed and data can be set. While setting the data for text box and then for date gives undefined for the latter. If date is set first then text box value then text value is undefined. I’ve used one handleChange function to extract values from both fields. Please refer to the code below.

const handleChange = (data) => {
    const { id, textVal, dateVal } = data;
    setDataNew((prevInfo) => {
      const newList = [...prevInfo];
      const index = newList.findIndex((datum) => datum.id === id);
      if (index !== -1) {

        // Here I'm setting the values for text box and date into index
        newList[index] = { id, textVal, dateVal };
      } else {
        newList.push({ id, textVal, dateVal });
      }
      return [...newList];
    });
  };

As you can see from above picture, when text value is changed date is undefined and when date value is changed text is undefined. I’m intending to pass both text and date values and fill it in array. What could be the best solution?

Please refer to codesandbox link –> https://codesandbox.io/s/elated-varahamihira-xpjtdb?file=/src/Table.js:566-964

Answer

You destructure both textVal and dateVal from the callbck data:

const { id, textVal, dateVal } = data;

But those values come from handlers that only set one or the other, not both:

        OnTextCallback={handleChange}
        DateCallBack={handleChange}

For example textCallback does this, which will never pass a dateVal:

                              onChange={(e) =>
                                textCallback({
                                  textVal: e.target.value,
                                  id: rowData[0].id
                                })
                              }

The smallest change solution is to check which one isn’t undefined and use that, preserving the rest of the entry:

  const handleChange = (data) => {
    const { id, textVal, dateVal } = data;
    setDataNew((prevInfo) => {
      const newList = [...prevInfo];
      const index = newList.findIndex((datum) => datum.id === id);
      if (index !== -1) {
        if (textVal !== undefined) {
          newList[index].textVal = textVal;
        }
        if (dateVal !== undefined) {
          newList[index].dateVal = dateVal;
        }
      } else {
        newList.push({ id, textVal, dateVal });
      }
      return [...newList];
    });
  };

Note this solution will still make the original object have one undefined key, until you change both inputs.

Or refactoring Grid.js to send up both values in a single onChange handler, but that requires switching your inputs to controlled inputs or adding refs to the inputs to get the latest value to pass to the callback.