स्पष्ट एकाधिक प्रतिक्रिया का चयन करें

इस दृष्टिकोण की कोशिश करो,

मैं बनाया है दो स्थानीय अमेरिका में यहाँ. एक के लिए विकल्प और अन्य के लिए चयनित विकल्प है । राज्य को अद्यतन करने पर आधारित बटन पर क्लिक करें और एक ही परिवर्तन को प्रतिबिंबित करेगा टेम्पलेट में.

import { IconButton } from "@material-ui/core";
import { useState } from "react";
import Select from "react-select";

import "./styles.css";

const opts = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

export default function App() {
  const [options, setOptions] = useState(opts);
  const [selected, setSelected] = useState(opts[0]);
  const handleRemoveFieldsAll = (event) => {
    setSelected(null);
    setOptions([]);
  };

  const handleInputChange2 = (option) => {
    setSelected(option);
  };

  const handlePopulateFieldsAll = () => {
    setSelected(opts[0]);
    setOptions(opts);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Select
        isClearable
        classNamePrefix="select"
        // ref={myRef}
        menuPortalTarget={document.body}
        // styles={style}
        placeholder="Select Foods"
        name="Foods"
        value={selected}
        options={options}
        onChange={(event) => handleInputChange2(event)}
        className="select selectNarrow"
      ></Select>

      <IconButton
        size="small"
        aria-label="edit"
        onClick={() => handleRemoveFieldsAll()}
      >
        Reset all
      </IconButton>

      <IconButton
        size="small"
        aria-label="edit"
        onClick={() => handlePopulateFieldsAll()}
      >
        Populate all
      </IconButton>
    </div>
  );
}

CODESANDBOX - https://codesandbox.io/s/intelligent-moore-nn8w5?file=/src/App.js:0-1483

मुझे पता है कि मामले में मैं कर रहा हूँ नहीं है को कवर करने के अपने उपयोग के मामले में ।