title: How do I correctly capture Materialize-CSS datepicker value in React?
body: <p>I am looking to create a form with a <a href="https://materializecss.com/pickers.html" rel="noreferrer">datepicker</a> in my React component with <a href="https://materializecss.com/" rel="noreferrer">materialize-css</a>. I don't have many fields this form is capturing and the structure is fairly simple. The form returned looks like this:</p>
  
  <pre><code>&lt;form onSubmit={this.handleSubmit.bind(this)}&gt;
       &lt;div className="container"&gt;
            &lt;div className="card grey lighten-3"&gt;
                 &lt;div className="card-content black-text"&gt;
                      &lt;span className="card-title"&gt;
                              &lt;input placeholder="Event Name"
                                      name="name" value={this.state.name}
                                      onChange={this.handleStateChange.bind(this)}/&gt;
                      &lt;/span&gt;
                      &lt;input name="description" placeholder="Description"
                                        value={this.state.description}
                                        onChange={this.handleStateChange.bind(this)}/&gt;
                      &lt;input name="image" placeholder="Image URL"
                                        value={this.state.image}
                                        onChange={this.handleStateChange.bind(this)}/&gt;
                      &lt;input placeholder="Start Date"
                                  className="datepicker" name="startDate" value={this.state.startDate}
                                  onSelect={this.handleStateChange.bind(this)}/&gt;
                  &lt;/div&gt;
                  &lt;div class="card-action"&gt;
                      &lt;div className="row"&gt;
                          &lt;span&gt;
                             &lt;div className="col s3"&gt;
                                 &lt;input className="btn light-blue accent-1" type="submit" value="Submit"/&gt;
                             &lt;/div&gt;
                             &lt;div className="col s3"&gt;
                                 &lt;a className="btn grey" onClick={this.handleExpand.bind(this)}&gt;Cancel&lt;/a&gt;
                             &lt;/div&gt;
                         &lt;/span&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/form&gt;
  </code></pre>
  
  <p>The state change is handled with </p>
  
  <pre><code>handleStateChange(item) {
      this.setState({[item.target.name]: item.target.value});
  }
  </code></pre>
  
  <p>and I have called the <a href="https://materializecss.com/auto-init.html" rel="noreferrer">AutoInit</a> to initialize my datepicker </p>
  
  <pre><code>M.AutoInit();
  </code></pre>
  
  <p>I've tried using <code>onChange</code> instead of <code>onSelect</code> to manage the datepicker state change, but it doesn't seem to capture that event. With <code>onSelect</code> used, the date sometimes gets capture if I pick a date then re-open the datepicker. </p>
  
  <p>I have also tried using some of the <a href="https://materializecss.com/pickers.html" rel="noreferrer">alternate initialization methods for the datepicker</a> to no avail. </p>
  
  <p>How do I correctly capture the input change with my given setup?</p>