title: how to handle multiple input changes with only 1 handler with hooks
body: <p>I have several states and I would like to write only 1 handler for all of them. On change, only 1 handler will trigger and change the state only if it has changed.</p>
  <p>I have the solution for class based components like this</p>
  <pre><code>handleChange (evt) {
      this.setState({ [evt.target.name]: evt.target.value });
  }
  </code></pre>
  <p>But when I use function based components, I couldn't figure it out how.</p>
  <pre><code>export default function DateBar(props)
  {
      let date = new Date();
      let i = 1;
      const days = Array.from({length: new Date(date.getYear(), date.getMonth() + 1, 0).getDate()}).map(() =&gt; &lt;option key = {uuidv4()} value={i}&gt;{i++}&lt;/option&gt;);
  
      const monthOpts = props.months.map(month =&gt; &lt;option key = {uuidv4()} value={month} name = {month} id = {month}&gt;{month}&lt;/option&gt;);
      const yearsOpts = props.years.map(year =&gt; &lt;option key = {uuidv4()} value ={year} name = {year} id = {year}&gt;{year}&lt;/option&gt;);
  
  
      // states
      const [today, setToday] = useState(&quot;&quot;);
      const [thisMonth, setThisMonth] = useState(&quot;&quot;);
      const [year, setYear] = useState(&quot;&quot;);
  
      useEffect(() =&gt;
      { 
          setToday(date.getDate());
          setThisMonth(props.months[date.getMonth()]);
          setYear(date.getYear());
      }, []);
  
      const handleChange = () =&gt; 
  {
      // for example, if day is changed, i want to call setToday() somehow..
  }
  
      return(
          &lt;div className=&quot;DateBarRoot&quot;&gt;
                  &lt;FormControl className=&quot;formControl input&quot; variant=&quot;outlined&quot;&gt;
                      &lt;InputLabel htmlFor=&quot;today&quot;&gt;Day&lt;/InputLabel&gt;
                      &lt;Select
                      native
                      value={today}
                      onChange={handleChange}
                      label = 'day'
                      inputProps={{
                          name: 'today',
                          id: 'today',
                      }}
                      &gt;
                          {days}
                      &lt;/Select&gt;
                  &lt;/FormControl&gt;
                  &lt;FormControl className=&quot;formControl input&quot; variant=&quot;outlined&quot;&gt;
                      &lt;InputLabel htmlFor=&quot;month&quot;&gt;Month&lt;/InputLabel&gt;
                      &lt;Select
                      native
                      value={thisMonth}
                      onChange={handleChange}
                      label = 'month'
                      inputProps={{
                          name: 'thisMonth',
                          id: 'thisMonth',
                      }}
                      &gt;
                          {monthOpts}
                      &lt;/Select&gt;
                  &lt;/FormControl&gt;
                  &lt;FormControl variant=&quot;outlined&quot; className=&quot;formControl input&quot;&gt;
                      &lt;InputLabel htmlFor=&quot;year&quot;&gt;Year&lt;/InputLabel&gt;
                      &lt;Select
                      native
                      className=&quot;select&quot;
                      value={year}
                      onChange={handleChange}
                      label = 'year'
                      inputProps={{
                          name: 'year',
                          id: 'year',
                      }}
                      &gt;
                          {yearsOpts}
                      &lt;/Select&gt;
                  &lt;/FormControl&gt;                
              &lt;/div&gt;
      )
  }
  
  </code></pre>
  <p>Thanks a lot in advance.</p>