In React How to select multiple values from enum in a dropdown?-CodePudding

I want multiple select checkbox option for enum value. Now i can select only one value from dropdown

 <ValidatedField
                label="flowers Type"
                id="flowers_type"
                name="flowers_type"
                data-cy="flowers_type"
                type="select"
              >
                {flowersTypeValues.map(flowersType => (
                  <option value={flowersType} key={flowersType}>
                    {flowersType}
                  </option>
                ))}
              </ValidatedField>

CodePudding user response：

To create a multiple select checkbox option for an enum value, you can use the multiple attribute of the select element and the checkbox input element. Here's an example of how you can do this:

import React from 'react';

const flowersTypeValues = ['Rose', 'Tulip', 'Lily'];

function MyForm() {
  const [selectedFlowersTypes, setSelectedFlowersTypes] = useState([]);

  const handleChange = event => {
    setSelectedFlowersTypes(event.target.value);
  };

  return (
    <form>
      <label htmlFor="flowers_type">Flowers Type:</label>
      <select
        multiple
        id="flowers_type"
        name="flowers_type"
        value={selectedFlowersTypes}
        onChange={handleChange}
      >
        {flowersTypeValues.map(flowersType => (
          <option value={flowersType} key={flowersType}>
            {flowersType}
          </option>
        ))}
      </select>
      <br />
      {flowersTypeValues.map(flowersType => (
        <label key={flowersType}>
          <input
            type="checkbox"
            value={flowersType}
            checked={selectedFlowersTypes.includes(flowersType)}
            onChange={handleChange}
          />
          {flowersType}
        </label>
      ))}
    </form>
  );
}

Here, we are using the useState hook to manage the state of the selected flowers types. The handleChange function is used to update the state when the user selects or deselects a flowers type.

We are also using the checkbox input element to display a list of checkboxes for the different flowers types. The checked attribute of the input element is set to true if the flowers type is selected, and the onChange event handler updates the state when the user checks or unchecks a checkbox.

CodePudding user response：

Here you can use React-select which allows you to select multiple options.

React-select gives you various options to customize it as you want You can look at the documentation below.

https://react-select.com/home#getting-started

To Install:

npm i --save react-select

here is a basic example of it:

import React from 'react';

import Select from 'react-select';

const colourOptions =  [
  { value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
  { value: 'blue', label: 'Blue', color: '#0052CC', isDisabled: true },
  { value: 'purple', label: 'Purple', color: '#5243AA' },
  { value: 'red', label: 'Red', color: '#FF5630', isFixed: true },
  { value: 'orange', label: 'Orange', color: '#FF8B00' },
  { value: 'yellow', label: 'Yellow', color: '#FFC400' },
  { value: 'green', label: 'Green', color: '#36B37E' },
  { value: 'forest', label: 'Forest', color: '#00875A' },
  { value: 'slate', label: 'Slate', color: '#253858' },
  { value: 'silver', label: 'Silver', color: '#666666' },
];

export default () => (
  <Select
    defaultValue={[colourOptions[2], colourOptions[3]]}
    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
  />
);