Uncaught RangeError: Invalid time value on react-DatePicker

Question

I have a React component as Form which has some text input and a DatePicker control. I display the inputs on a table using react-bootstrap-table-next library, which can't display date directly form DatePicker and I need to convert first as JSON.parse(JSON.stringify(dueDate) and then moment(dueDate).format("yyyy-MM-DD"); to display. However, this conversion is creating problem when I try to edit the date. I have to send back the date as it was for DatePicker to render. This is where the error (Uncaught RangeError: Invalid time value) is occurring.

Form component: only providing the needed part of the code

const Form = ({
    ...
    dueDate, 
    setDueDate
}) => {

const updateTodo = (dueDate, id, completed) => {
    const newTodo = todos.map(
        (todo) =>todo.id === id ? 
            {dueDate, id, completed} :
                todo);
    setTodos(newTodo);
    setEditTodo("");
};

useEffect(() => {
    if(editTodo) {
        ...
        setDueDate(editTodo.dueDate);
    } else {
        setDueDate(new Date());
    }

}, [setDueDate, editTodo]);

...
...

const onDueDateChange = (date) => {
    setDueDate(moment(date).toDate());
  }

const onFormSubmit = (event) => {
    event.preventDefault();
    if(!editTodo) {
        setTodos([...todos, {id: uuidv4(), 
                      dueDate: JSON.parse(JSON.stringify(dueDate)),  <<<<<<<<<conversion 
                    completed: false}]);
        ...
        setDueDate(new Date());
    } else {
        updateTodo(dueDate, editTodo.id, editTodo.completed);
    }

}      
    return (
    <form onSubmit={onFormSubmit}>
        ...
        ...
        <DatePicker
            className="datePicker"
            selected={dueDate}
            onChange={onDueDateChange}
            name="dueDate"
            dateFormat="yyyy-MM-dd"
          />              
         ...
         ...
    </form>
    );
};

export default Form;

ToDoList component: This renders the inputs on a table

const TodosList = ({
    todos,
    setTodos, 
    setEditTodo
}) => {
    ...     
    const handleEdit = ({id}) => {
        const findTodo = todos.find((todo) => todo.id === id);
        setEditTodo(findTodo);
    }
    ...
      const editBtn = (cell, row, rowIndex) => {
        return (
            <button className="button-edit task-button" 
            onClick={() => handleEdit(row)}>
            <i className="fa fa-edit"></i>
        </button>
        );
      };

      ...
      const formatDate = (cell, row) => {
        return moment(row.dueDate).format("yyyy-MM-DD");
          
      }

    const columns = [
        { dataField: 'dueDate', text: 'Due Date', formatter:formatDate },
        { dataField: '', text: 'Edit',  formatter: editBtn },
      ];
  
    return (
        <div>
            ...
                <BootstrapTable 
                    bootstrap4
                    keyField='id' 
                    data={todos} 
                    columns={columns}
                />
              ...           
    </div>
    );
};

export default TodosList;

Before conversion DatePicker capturing date as Mon Aug 09 2021 08:45:30 GMT+0200 (Central European Summer Time) format. And the date which I am trying to edit is captured as 2021-08-19T21:34:24.000Z. This is where issue is hapenning I assume.

Tried since DatePicker only takes Date as input. I tried to reconvert it using moment(dueDate).toDate(), but this doesn't seem to work, because can't spot where exactly the reconversion is needed again in the Form component.

Answer 1

Tracked down the spot to apply the solution:

While the state is updated, that is where the reconversion needed to happen. Reconversion is to convert the date to Date format again.

useEffect(() => {
if(editTodo) {
    setDueDate(moment(editTodo.dueDate).toDate()); <<<<<<<< this is the solution
} else {
    setDueDate(new Date());
}

}, [setTitle, setDescription, setDueDate, editTodo]);