Setting antd DatePicker value from the DB via an async fetch

Question

i'm using Ant Design React library to populate a Table, each row containing some editable text, editable date and buttons. it is supposed to look like the image below:

stored requests screenshot

the contents of the Table are populated from the DB, using the Django REST API. The problem appears with getting the date value from the database and passing it to the DatePicker.value.

i'm only aware of async way of fetching data with React from the REST API, in the following way:

async function getDate(props, key)
{
   var valDate = dayjs();

   let response = await fetch('http://127.0.0.1:8000/authapi/notes/'+key+'/', {
      method:'GET',
      headers:{
         'Content-type':'application/json',
         'Authorization':'Bearer ' + String(props.autht.access)
      }
   });

   console.log("Async fetch response: ", response);
   let data = await response.json();

   if (response.status === 200)
   {
      valDate = dayjs(data.pub_date);
      console.log("Date: ", valDate);
   }
   else if (response.statusText === 'Unauthorized')
   {
      logoutUser();
   }
   return valDate;
}

when i populate the columns of the Table, if DatePicker is used to display the data from the DB and not from a const, it says "Invalid Date", most likely because of the getDate being async:

export function StoredRequests(props)
{
   const [reqdata, setData]  = useState([]);
   useEffect(() => {getRequests()}, []);   /* getRequests is also an async function that receives full data for the Table, like getDate does for a specific key. getRequests calls setData to make the Table updatable via useState/useEffect magic. */

   //DEBUG, let's call getDate() just to see what it returns
   var constDate = getDate(props,96);
   console.log(constDate);   //a Promise?

   //some of the columns omitted here for brevity
   const columns = [
      {
         title: 'Search Request',
         dataIndex: 'request',
         width: '25%',
         editable: true,
      },
      {
         title: 'From Date',
         dataIndex: 'pub_date',
         width: '25%',
         render: (_, record) =>
            reqdata.length >=1 ? (
               <DatePicker
                  className = {record.key}
                  presets = {rangePresets}
                  showTime
                  format = "YYYY/MM/DD HH:mm:ss"
                  onChange = {onChange}
                  onOk = {onOk}
                  value = {dayjs(getDate(props, record.key), "YYYY/MM/DD HH:mm:ss")}
               />
            ) : null,
      },
   ];

   const columnsProcessed = columns.map((col) => {
      if (!col.editable)
      {
         return col;
      }
      return {
         ...col,
         onCell: (record) => ({
            record,
            editable: col.editable,
            dataIndex: col.dataIndex,
            title: col.title,
            handleSave,
         }),
      };
   });

   return (
      <Table
         components={components}
         rowClassName={()=>'editable-row'}
         bordered
         columns={columnsProcessed}
         dataSource={reqdata}
      />
   );
}

Result: Invalid Date

i'm assuming the value attribute of the DatePicker cannot be set via an async function. If the value is set not to value = {dayjs(getDate(props, record.key), "YYYY/MM/DD HH:mm:ss")}, but to the current date, e.g. value = {dayjs(), "YYYY/MM/DD HH:mm:ss")} - the data is displayed correctly. What would be the correct way to work around this? Instead of fetch i could use axios, but it's also async.

If instead of the DatePicker, the data is printed in an editable cell of the Table (like the ones to the left of the Date, e.g. 'Search Request' in the screens), it is being displayed in the Table without issues, but DatePicker seems so much more usable from the UX standpoint. Thank you!

Answer 1

Seems like i made it overcomplicated, and the trick is to pass the date as part of the record set:

const columns = [
      {
         title: 'Search Request',
         dataIndex: 'request',
         width: '25%',
         editable: true,
      },
      {
         title: 'From Date',
         dataIndex: 'pub_date',
         width: '25%',
         render: (_, record) =>
            reqdata.length >=1 ? (
               <DatePicker
                  className = {record.key}
                  presets = {rangePresets}
                  showTime
                  format = "YYYY/MM/DD HH:mm:ss"
                  onChange = {onChange}
                  onOk = {onOk}
                  value = {dayjs(record.pub_date)} //here, instead of doing an async call
               />
            ) : null,
      },
   ];