CODEWITHSUNDEEP
javascriptreactjsreact-datepicker
Prakash Patil
Prakash Patil

Reputation: 277

How to handle multiple Datepickers in React hooks?

In a React project, I'm able to handle single instance of Datepicker easily, but, what if there are multiple instances of it. When date is changed, it doesn't get updated but, can be seen in console. What are possible solutions to handle it efficiently? Please refer to code below

This is the Grid where JSON data is passed into it

const [establishDate, setEstablishDate] = useState();

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

   // colData is the JSON data passed, where I want to change
   startDate={colData}
   />
  </div>)
}

As seen from above code, 'colData' is the date data coming from JSON. When tried to change with Datepicker, it changes but, the data is seen in console and not on UI. What changes could be done to make it workable? Refer image for clarity.

Please also refer to codesandbox link --> https://codesandbox.io/s/long-fog-ofc0xf?file=/src/Grid.js

enter image description here

Upvotes: 1

Views: 451

Answers (1)

Leandro Lai&#241;o
Leandro Lai&#241;o

Reputation: 46

The dates aren't changing because the state is associated to the date picker father you need move this state to the date picker and make some changes to the custom date picker

const DatePickerNew = ({ startDate, setRequesterDate }) => {
  const [establishDate, setEstablishDate] = useState();

  useEffect(() => {
    setEstablishDate(startDate);
  }, [startDate, setEstablishDate]);

and the selected date must show inside de datepicker

<DatePicker
  selected={establishDate}

Hope this may help you

Upvotes: 2

Related Questions