Semantic react ui dropdown multiple selection: option to Select All

Question

I am developing a react application based on hooks and for multi select dropdown am using react semantic ui Dropdown. But there is no option to Select All items. How to acheieve this? On click of Select All all the items should be selected and not be shown in the dropdown:-

import React, { useState } from "react";
import { Dropdown } from "semantic-ui-react";

const options = [
  { key: "select all", text: "Select All", value: "Select All" },
  { key: "angular", text: "Angular", value: "angular" },
  { key: "css", text: "CSS", value: "css" },
  { key: "design", text: "Graphic Design", value: "design" },
  { key: "ember", text: "Ember", value: "ember" },
  { key: "html", text: "HTML", value: "html" },
  { key: "ia", text: "Information Architecture", value: "ia" },
  { key: "ux", text: "User Experience", value: "ux" }
];

const DropdownExampleMultipleSelection = () => {
  const [selectedItems, setSelectedItems] = useState([]);
  const onChange = (event, data) => {
    setSelectedItems(data.value);

    if (data.value == "Select All") {
      console.log(data);
      console.log(event.target);
    }
  };

  return (
    <Dropdown
      placeholder="Skills"
      clearable
      fluid
      multiple
      selection
      options={options}
      onChange={onChange}
      value={selectedItems}
      label="Skills"
    />
  );
};

export default DropdownExampleMultipleSelection;

Answer 1

You need to check for the last selected items with event.target.textContent and add all options if this is selected.

const onChange = (event, data) => {
    if(event.target.textContent === 'Select All') {
      setSelectedItems(data.options.map(d => d.value))
    } else {
      setSelectedItems(data.value);
    }
  };