Date value changed doesn't get updated in UI

Prakash Patil 0
Viewed 36

In a Table Grid, The data populated on Grid is JSON which I'm receiving it from another component. It also has input fields like text box and date which can be changed. Here in this case, when a date value is changed it gets updated in console but on UI. 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} <-- Here colData is used which comes from JSON
      setStartDate={setStartDate}
      />
   </div>
)}

As you can see from above code, I have used 'colData', since, I want to make changes on that value, I know we need to make use of 'startDate', but want to change the JSON data and process it further. Here I'm mimicking the API received as JSON. What code changes can be done to set the 'colData' and reflect it in UI.

enter image description here

As seen from above image, record with name 'Shawns', the date has been changed which is seen in console below, but, not on UI. Any suggestions or code changes highly appreciated

Please refer to codesandbox link as well -> https://codesandbox.io/s/elated-varahamihira-xpjtdb?file=/src/Grid.js:2386-3065

react-datepicker reactjs javascript
1 Answers

The issue is that you are not using "startDate" as a variable, but just setting the startDate of the datePicker to coldata. This means that the startDate will always be coldata, and never be changed by the state. You will have to change the startDate prop of the datepicker to be "startDate", and then set the default state from another place.

(For example you could add another prop to the datepicker receiving the coldata, and on mount of the datepicker use setStartDate to set the default state.)

Here is a working codesandbox based on your version: https://codesandbox.io/s/sad-aj-q1ir97?file=/src/Grid.js

Darren Landig0
Related