React form handle multiple selection

Question

I am not able to handle multiple selection, due to the fact that I use State and everytime I select an option, a new item is added, but I need to store all the results in an array.

Please find bellow my code:

const [categories, setCategories] = useState([]);

return (
    <div className="create">
      <h2>Add a New Rating</h2>
      <form onSubmit={handleSubmit}>
        <label>Review title:</label>
        <label>Rating:</label>
       

        <select
          style={{ height: "170px" }}
          className="multiple"
          multiple={true}
          value={categories}
          onChange={(e) => setCategories(e.target.value)} #<-- here, I don't know how to store more items in the initial array
        >
          {data.categories.data.map((category) => (
            <option value={category.id} key={category.id}>
              {category.attributes.name}
            </option>
          ))}
        </select>

        <button>Add Review</button>
      </form>
    </div>
  );
};

How can I manage to implement the multiple selection in this react app?

Does this answer your question? How do I update states `onChange` in an array of object in React Hooks — Emile Bergeron
– Emile Bergeron, Commented Mar 26, 2022 at 20:15
Please, only use tags that are relevant to your question. Here, your question is about React in JavaScript, not about either strapi or GraphQL even if your project uses those. — Emile Bergeron
– Emile Bergeron, Commented Mar 26, 2022 at 20:17

gelato grande · Accepted Answer · 2022-03-26 13:25:25Z

1

I solved it with this one:


  const updateFieldChanged =  e => {

    console.log('property name: '+ e.target.name);
    let newArr = [...categories]; // copying the old datas array
    newArr.push(e.target.value); // replace e.target.value with whatever you want to change it to
  
    setCategories(newArr);
  }

answered Mar 26, 2022 at 13:25

gelato grande

631 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justin Meskan · Accepted Answer · 2022-03-26 19:46:51Z

1

You could also use the .concat method. It returns a new array as not manipulated state.

setCategories(categories.concat(e.target.name));

answered Mar 26, 2022 at 19:46

Justin Meskan

7031 gold badge10 silver badges37 bronze badges

Collectives™ on Stack Overflow

React form handle multiple selection

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related