title: How to store value as an array with UseState in React form when submit?
body: <p>I am trying to create a form in React, I am able to store the categories in an array but whenever the user types something it behaves differently.</p>
  <p>I am passing product objects to the backend where categories are array. How should I store this value in the array when the user submits all forms without affecting UX? Can I move this logic to <code>submitHandler</code> function?</p>
  <p><a href="https://i.stack.imgur.com/TKsSa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TKsSa.png" alt="This is how it looks like when I type Man for instance" /></a></p>
  <p>Here is what I tried.</p>
  <pre><code>  const [categories, setCategories] = useState([])
    const [price, setPrice] = useState(0)
  
    const submitHandler = (e) =&gt; {
      e.preventDefault();
      dispatch(createProduct({
        title,
        desc,
        img,
        categories,
        size,
        price,
        countInStock
      }))
    };
  
  &lt;Form onSubmit={submitHandler}&gt;
            &lt;Form.Group controlId=&quot;categories&quot;&gt;
              &lt;Form.Label&gt;Categories&lt;/Form.Label&gt;
              &lt;Form.Control
                type=&quot;categories&quot;
                placeholder=&quot;Enter categories&quot;
                value={categories}
                onChange={(e) =&gt; setCategories(category =&gt; [...category, e.target.value])}
              &gt;&lt;/Form.Control&gt;
            &lt;/Form.Group&gt;
      
            &lt;Container className=&quot;&quot;&gt;
              &lt;Row&gt;
                &lt;Col&gt;
                  &lt;Button type=&quot;submit&quot; variant=&quot;primary&quot; className=&quot;my-2&quot;&gt;
                    Create
                  &lt;/Button&gt;
                &lt;/Col&gt;
              &lt;/Row&gt;
            &lt;/Container&gt;
          &lt;/Form&gt;
        )}
        &lt;/FormContainer&gt;
  </code></pre>