title: how to get multiple inputs type date values to console with checking if empty
body: <p>I have six inputs type date, four of them are read-only. When I choose a date on the first one, I calculate that date and put the values on the read-only inputs, and I choose a date in the last input after that I click the button.
  I want to console.log() all of the dates, and get errors if the the inputs are empty.</p>
  <p>As you can see in the picture, only the first and last dates are logged because the OnChange event is triggered, but I want to log the the other two in red too, and it's not working out with me
  <a href="https://i.stack.imgur.com/DtFfX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DtFfX.jpg" alt="enter image description here" /></a></p>
  <p>Here's what I have done:</p>
  <pre><code>import { React, useState } from &quot;react&quot;;
  import moment from &quot;moment&quot;;
  
  
  export default function Test() {
  
    const [date, setdate] = useState({ date1: &quot;&quot;, date2: &quot;&quot;, date3: &quot;&quot;, date4: &quot;&quot; });
    const [error, seterror] = useState(&quot;&quot;);
  
  
  
    const handleChange = (event) =&gt; {
      const value = event.target.value;
      setdate({
        ...date,
        [event.target.name]: value
      });
    }
  
    const handleClick = (event) =&gt; {
      event.preventDefault();
      if (date.date1 === &quot;&quot; || date.date4 === &quot;&quot;) {
        seterror(&quot;error&quot;)
  
      } else {
        console.log(&quot;bye&quot;)
        seterror(&quot;&quot;)
        console.log(date)
  
      }
    };
  
    function addDays(date, days) {
      if (!date) {
        return ''
      } else {
        var result = new Date(date);
        result.setDate(result.getDate() + days);
        var res = moment(result).format(&quot;YYYY-MM-DD&quot;)
        return res;
      }
  
    }
  
  
  
    return (
      &lt;div&gt;
        &lt;div className=&quot;widget widget-chart-one&quot;&gt;
  
          &lt;form&gt;
  
            &lt;label&gt;تاريخ القرار&lt;/label&gt;
            &lt;input type=&quot;date&quot; className=&quot;form-control&quot; name=&quot;date1&quot; onChange={handleChange}
            /&gt;
  
  
            &lt;label&gt;تاريخ النشر  &lt;/label&gt;
  
            &lt;div className=&quot;form-group row  mb-6&quot;&gt;
              &lt;div className=&quot;col-sm-6&quot;&gt;
                &lt;input type=&quot;date&quot; className=&quot;form-control&quot; value={date.date1} readOnly /&gt;
  
              &lt;/div&gt;
              &lt;div className=&quot;col-sm-6&quot;&gt;
                &lt;input type=&quot;date&quot; className=&quot;form-control&quot; name=&quot;date2&quot; value={addDays(date.date1, 15)} onChange={handleChange} readOnly /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;label &gt;فترة البحث العمومي  &lt;/label&gt;
  
            &lt;div className=&quot;form-group row  mb-6&quot;&gt;
              &lt;div className=&quot;col-sm-6&quot;&gt;
  
                &lt;input type=&quot;date&quot; className=&quot;form-control&quot; value={addDays(date.date1, 15)} readOnly /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;col-sm-6&quot;&gt;
                &lt;input type=&quot;date&quot; className=&quot;form-control&quot; name=&quot;date3&quot; value={addDays((addDays(date.date1, 15)), 9)} onChange={handleChange} readOnly /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;label&gt;تاريخ الاجتماع&lt;/label&gt;
            &lt;div className=&quot;form-group row  mb-10&quot;&gt;
              &lt;div className=&quot;col-sm-12&quot;&gt;
                &lt;input type=&quot;date&quot; className=&quot;form-control&quot; name=&quot;date4&quot; onChange={handleChange} /&gt;
  
              &lt;/div&gt;
  
            &lt;/div&gt;
            &lt;button className=&quot;mr-2 btn btn-primary&quot; type=&quot;submit&quot; onClick={handleClick}&gt; تأكيد&lt;/button&gt;
            &lt;div&gt;
              {error &amp;&amp; &lt;small className=&quot;text-danger&quot;&gt; {error} &lt;/small&gt;}
            &lt;/div&gt;
  
  
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>