Getting undefined when changed data in input field

Question

In a table of records, there are certain input text fields and date field which can be changed. When input text is changed date field gets undefined and for date field its vice-versa. My intention is to pass values of input text as well as date values, but, gets undefined in the console. Please refer to code below

const handleChange = (data) => {
    // here text and date values are extracted
    const { id, textVal, dateVal } = data;
    setDataNew((prevInfo) => {
      const newList = [...prevInfo];
      const index = newList.findIndex((datum) => datum.id === id);
      if (index !== -1) {
        // getting undefined here
        newList[index] = { id, textVal, dateVal };
      } else {
        newList.push({ id, textVal, dateVal });
      }
      return [...newList];
    });
  };

I'm able to process data only when input text is changed, but, on date field change input data is undefined... similarly it happens for date field as well.

Please refer to codesandbox link for better clarity --> https://codesandbox.io/s/elated-varahamihira-xpjtdb?file=/src/Table.js:968-1155

Answer 1

You will have to pass other value from the Grid component in the callback of date change and name change.