List all group in input?

Question

I have list of group and I want to create input and let user choose groups he wants

  initialGroups

Its ok use for this reason Bootstrap Form.Control?

 <Form.Control
      as="select"
      required
      multiple
      value={initialGroups}
      onChange={onChangeGroups}
      >

      </Form.Control>

 const onChangeGroups = e => {
    const groups = e.target.value.initialGroups;
    setGroups(groups);
  }

How to list all groups(name) and let user choose he wants?

Finally I would like to have like this:

Answer 1

When you have multiple values the user should choose from, you can use Form.Select component. Please look into following sandbox:

https://codesandbox.io/s/staging-cookies-ir1hbx

<Form.Select>
    <option hidden>Please choose</option>
    {initialGroups.map((group) => {
      return (
        <option key={group.id} value={group.id}>
          {group.value}
        </option>
      );
    })}
</Form.Select>