When data is changed, doesn't update on UI but seen in console

Question

In a React project, with certain records of input fields, date data can be changed, but, doesn't reflect it on UI and when seen in console, its shown over there. I'm using react datepicker for date component. Please refer to code below:

const [startDate, setStartDate] = useState();

{colConfig[cIndex].data_type === "date" &&
   !colConfig[cIndex].cell_click_callback && (
   <div>
   <DatePickerNew
   setRequesterDate={(e) =>
   dateCallback({dateVal: e, id: rowData[0].id})}
      startDate={colData}
      setStartDate={setStartDate}
      />
   </div>
)}

As you can see from above code, I'm passing 'coldata' from props and accordingly displaying. The data doesn't get updated on UI but, its seen in console.

You can see from image below, the date data is changed for 'Shawns' but it isn't updated on UI, but, can be seen in console. What could be the best solution to sort it out?

Please refer to codesandbox link --> https://codesandbox.io/s/elated-varahamihira-xpjtdb?file=/src/Grid.js:499-544

Answer 1

The problem is, you set your startDate properly but never use it to display the data.

If you just use startDate in you component instead of colData , you will see the changes starting to reflect properly:

 <DatePickerNew
   setRequesterDate={(e) =>
     dateCallback({dateVal: e, id: rowData[0].id})
   }
   startDate={startDate} // <- Using startDate here
   setStartDate={setStartDate}
 />

You would obviously need state for each row seperately which would be much better if you have the startDate state inside the DatePickerNew component