title: TypeError: Cannot read property 'name' of undefined error in a controlled-component
body: <p>I'm trying to get a date as user input through a controlled component but always running into this error "TypeError: Cannot read property 'name' of undefined". This is the piece of code that's causing the error. I'm using the <code>react-datepicker</code> module to get the Date input as when I try to use the HTML input <code>type="date"</code> i'm unable to disable previousdates.</p>
  
  <pre><code>import React, {Fragment,useState,useEffect} from 'react';
  import {Link,withRouter} from 'react-router-dom';
  import DatePicker from "react-datepicker";
  import "react-datepicker/dist/react-datepicker.css";
  import PropTypes from 'prop-types';
  import {connect} from 'react-redux'; 
  import {addTask} from '../../actions/task';
  import { addDays } from 'date-fns';
  
  const TaskForm = ({addTask}) =&gt; {
      const [formData,setFormData] = useState({
          description:'',
          due_at:'',
          toBeReminded:''
      })
  
      const onSubmit = e =&gt; {
          e.preventDefault();
          addTask(formData);
      }
  
      const onChange = e=&gt;setFormData({...formData, [e.target.name]:e.target.value})
      const {description,due_at} = formData;
      return (
          &lt;Fragment&gt;
              &lt;h1 className="large text-primary"&gt;
                  New Task
              &lt;/h1&gt;
              &lt;form className="form my-1" onSubmit={e=&gt;onSubmit(e)}&gt;
                  &lt;div className="form-group"&gt;
                      &lt;label htmlFor="descr"&gt;Description:&lt;/label&gt;&lt;br/&gt;
                      &lt;input type="text" id="descr" placeholder="Task Description" name="description" value={description} onChange={e=&gt; onChange(e)}/&gt;
                  &lt;/div&gt;
                  &lt;div className="form-group"&gt;
                      &lt;label htmlFor="due_date"&gt;Due Date for Task:&lt;/label&gt;&lt;br&gt;&lt;/br&gt;
                      &lt;DatePicker id="due_date" minDate={addDays(new Date(), 1)} id="due_date" name="due_at" value={due_at} onChange={e=&gt; onChange(e)} /&gt;
                  &lt;/div&gt;
                  &lt;div className="form-group"&gt;
                      &lt;label htmlFor="reminder"&gt;Set Reminder:&lt;/label&gt;&lt;br&gt;&lt;/br&gt;
                      &lt;input type="radio" id="yes" name="toBeReminded"  value="true" onClick={e=&gt; onChange(e)}/&gt;
                      &lt;label htmlFor="yes"&gt;Yes&lt;/label&gt;&lt;br/&gt;
                      &lt;input type="radio" id="no" name="toBeReminded" value="false" onClick={e=&gt; onChange(e)}/&gt;
                      &lt;label htmlFor="no"&gt;No&lt;/label&gt;&lt;br&gt;&lt;/br&gt; 
                  &lt;/div&gt;
                  &lt;input type="submit" className="btn btn-dark my-1" value="Submit" /&gt;
                  &lt;Link className="btn btn-light my-1" to="/tasks"&gt;Go Back&lt;/Link&gt;
              &lt;/form&gt;
          &lt;/Fragment&gt;
      )
  }
  
  TaskForm.propTypes = {
      addTask:PropTypes.func.isRequired
  }
  
  export default connect(null,{addTask})(TaskForm);
  </code></pre>