Date value changed doesn't get updated in UI

Question

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.

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

Does this answer your question? When data is changed, doesn't update on UI but seen in console — Softwared
– Softwared, Commented Sep 22, 2022 at 14:56
It was the same question without any solution. Can you think for any optimal solution? — Prakash Patil
– Prakash Patil, Commented Sep 22, 2022 at 19:15

Darren Landig · Accepted Answer · 2022-09-22 17:30:10Z

0

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

edited Sep 22, 2022 at 17:30

answered Sep 22, 2022 at 14:53

Darren Landig

661 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Prakash Patil Over a year ago

Thanks for the response... If you don't mind can you please update codesandbox

Darren Landig Over a year ago

I have edited my answer to add a working codesandbox fork based on your Version. As you might notice, I have also renamed the state to make it clearer what it is for.

Prakash Patil Over a year ago

Actually I wanted date from JSON to change here in Grid

Prakash Patil Over a year ago

Your solution is changing all other dates as well

Darren Landig Over a year ago

I just saw what you actually want to achieve, and your current setup is not made for it. First, I would start by actually making your GridData to a state. Then you can start building the grid based on this state, and changing the state based on the input fields. This would be to much effort writing for you in codesandbox though.

|

Collectives™ on Stack Overflow

Date value changed doesn't get updated in UI

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related