title: Multiple time slots for Week days using ReactJS
body: <p>If anyone can help me to optimize the following code. I am trying to create a registration page where users can select their time availability for selected days. Users have option to select multiple rows for the same day.. The link for codesandbox is <a href="https://codesandbox.io/s/react-hook-helper-availability-0r6bd?file=/src/Second.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-hook-helper-availability-0r6bd?file=/src/Second.js</a>. Though i have achieved this but it can be further be optimized as i am using the same code for different days. I am reusing the same code. I have added for just Monday and Tuesday, in case i have to use Monday to Saturday, then i will have to repeat the same codes with changes in few fields.</p>
  <pre><code>  const [monday, setMonday] = useState([{ FROM: &quot;&quot;, TO: &quot;&quot; }]);
    const [tuesday, setTuesday] = useState([{ FROM: &quot;&quot;, TO: &quot;&quot; }]);
  
    const [time, setTime] = useState([
      { Id: &quot;00:30&quot;, value: &quot;00:30&quot; },
      { Id: &quot;01:00&quot;, value: &quot;01:00&quot; },
      { Id: &quot;01:30&quot;, value: &quot;01:30&quot; },
      { Id: &quot;02:00&quot;, value: &quot;02:00&quot; },
  ......
  let timeList =
      time.length &gt; 0 &amp;&amp;
      time.map((item, i) =&gt; {
        return (
          &lt;&gt;
            &lt;option key={item.Id} value={item.id}&gt;
              {item.value}
            &lt;/option&gt;
          &lt;/&gt;
        );
      }, this);
  
  
  </code></pre>
  <p>On add, remove actions</p>
  <pre><code>const handleInputChangeForMonday = (e, index) =&gt; {
      const { name, value } = e.target;
      const list = [...monday];
      list[index][name] = value;
      setMonday(list);
    };
  
    // handle click event of the Remove button
    const handleRemoveClickForMonday = (index) =&gt; {
      const list = [...monday];
      list.splice(index, 1);
      setMonday(list);
    };
  
    // handle click event of the Add button
    const handleAddClickForMonday = () =&gt; {
      setMonday([...monday, { FROM: &quot;&quot;, TO: &quot;&quot; }]);
    };
  
    // handle input change
    const handleInputChangeForTuesday = (e, index) =&gt; {
      const { name, value } = e.target;
      const list = [...tuesday];
      list[index][name] = value;
      setTuesday(list);
    };
  
    // handle click event of the Remove button
    const handleRemoveClickForTuesday = (index) =&gt; {
      const list = [...tuesday];
      list.splice(index, 1);
      setTuesday(list);
    };
  
    // handle click event of the Add button
    const handleAddClickForTuesday = () =&gt; {
      setTuesday([...tuesday, { FROM: &quot;&quot;, TO: &quot;&quot; }]);
    };
  
  </code></pre>
  <p>Now this is the repeated code.</p>
  <pre><code>&lt;form onSubmit={onSubmit}&gt;
          {monday.map((x, i) =&gt; {
            return (
              &lt;React.Fragment&gt;
                &lt;select
                  name=&quot;FROM&quot;
                  value={x.FROM}
                  onChange={(e) =&gt; handleInputChangeForMonday(e, i)}
                &gt;
                  &lt;option selected hidden&gt;
                    From
                  &lt;/option&gt;
                  {timeList}
                &lt;/select&gt;
                &amp;nbsp;&amp;nbsp;&amp;nbsp;
                &lt;select
                  name=&quot;TO&quot;
                  value={x.TO}
                  onChange={(e) =&gt; handleInputChangeForMonday(e, i)}
                  placeholder=&quot;select your Institute&quot;
                &gt;
                  &lt;option selected hidden&gt;
                    TO
                  &lt;/option&gt;
                  {timeList}
                &lt;/select&gt;
                &lt;div style={{ textAlign: &quot;left&quot;, width: &quot;84%&quot; }}&gt;
                  {monday.length !== 1 &amp;&amp; (
                    &lt;label
                      as=&quot;a&quot;
                      onClick={() =&gt; handleRemoveClickForMonday(i)}
                      style={{ marginRight: &quot;10px&quot; }}
                    &gt;
                      remove
                    &lt;/label&gt;
                  )}
  
                  {monday.length - 1 === i &amp;&amp; (
                    &lt;button
                      type=&quot;button&quot;
                      as=&quot;a&quot;
                      onClick={handleAddClickForMonday}
                      style={{ marginRight: &quot;10px&quot; }}
                    &gt;
                      add
                    &lt;/button&gt;
                  )}
                &lt;/div&gt;
              &lt;/React.Fragment&gt;
            );
          })}
          &lt;br /&gt;
          &lt;br /&gt;
  
          {tuesday.map((x, i) =&gt; {
            return (
              &lt;React.Fragment&gt;
                &amp;nbsp;&amp;nbsp;&amp;nbsp;
                &lt;select
                  name=&quot;FROM&quot;
                  value={x.FROM}
                  onChange={(e) =&gt; handleInputChangeForTuesday(e, i)}
                &gt;
                  &lt;option selected hidden&gt;
                    From
                  &lt;/option&gt;
                  {timeList}
                &lt;/select&gt;
                &amp;nbsp;&amp;nbsp;&amp;nbsp;
                &lt;select
                  name=&quot;TO&quot;
                  value={x.TO}
                  onChange={(e) =&gt; handleInputChangeForTuesday(e, i)}
                  placeholder=&quot;select your Institute&quot;
                &gt;
                  &lt;option selected hidden&gt;
                    TO
                  &lt;/option&gt;
                  {timeList}
                &lt;/select&gt;
                &lt;div style={{ textAlign: &quot;left&quot;, width: &quot;84%&quot; }}&gt;
                  {tuesday.length !== 1 &amp;&amp; (
                    &lt;label
                      as=&quot;a&quot;
                      onClick={() =&gt; handleRemoveClickForTuesday(i)}
                      style={{ marginRight: &quot;10px&quot; }}
                    &gt;
                      remove
                    &lt;/label&gt;
                  )}
  
                  {tuesday.length - 1 === i &amp;&amp; (
                    &lt;button
                      type=&quot;button&quot;
                      as=&quot;a&quot;
                      onClick={handleAddClickForTuesday}
                      style={{ marginRight: &quot;10px&quot; }}
                    &gt;
                      add
                    &lt;/button&gt;
                  )}
  </code></pre>