How to use date-picker in a react component using hooks

Question

I have a component with a form that should display a date picker

const MyComponent = () => {
  const [formData, setFormData] = useState({
    dateFrom: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
    dateTo: new Date()
  });

  const handleOnChange = e => {
    setFormData({...formData, [e.target.name]: e.target.value});
  };

  return (
    <DatePicker
      selected={formData.dateFrom}
      name="dateFrom"
      dateFormat="MMMM d, yyyy"
      onChange={e => handleOnChange(e)}
      />
  );
};

What I need to do is to save the new date in the state, and get it back to update the component useing its selected property.

the handleOnChange method works for other form controls, not for the date picker, the error I am getting says :

Cannot read property 'name' of undefined

Any suggestion?

Answer 1

the callback of onChange on the <DatePicker /> will have the value as first param, not the event , you can pass a similar Object to handleOnChange to keep it generic :

<DatePicker
  selected={formData.dateFrom}
  name="dateFrom"
  dateFormat="MMMM d, yyyy"
  onChange={value => handleOnChange({target : { name: "dateForm", value}})}
/>