How can I add multiple select option value in react-select

Question

I am trying to create function that let user can select multiple options in react-select.

Here is my following code for onChange function:

const [searchUsers, setSearchUsers] = useState(false);
const [searchTeams, setSearchTeams] = useState(false);
const [searchOrganizations, setSearchOrganizations] = useState(false);

  const find = (value) => {
    value.forEach((option) => {
      if (option.value === "Users" && value.length === 1) {
        setSearchUsers(true);
        setSearchTeams(false);
        setSearchOrganizations(false);
      } else if (option.value === "Teams" && value.length === 1) {
        setSearchUsers(false);
        setSearchTeams(true);
        setSearchOrganizations(false);
      } else if (option.value === "Organizations" && value.length === 1) {
        setSearchUsers(false);
        setSearchTeams(false);
        setSearchOrganizations(true);
      } else {
        setSearchUsers(false);
        setSearchTeams(false);
        setSearchOrganizations(false);
      }
    });
  };

  const findList = [
    { value: "Users", label: "Users" },
    { value: "Teams", label: "Teams" },
    { value: "Organizations", label: "Organizations" },
  ];

  const searchData = [];
  findList.forEach((item) =>
    searchData.push({ label: item.label, value: item.value })
  );

and here is my Select tag:

  <Select
    className="search-select"
    styles={customStyles}
    instanceId="long-value-select"
    closeMenuOnSelect={false}
    components={animatedComponents}
    defaultValue="Select"
    isMulti
    onChange={find}
    options={searchData}
    theme={(theme) => ({
      ...theme,
      colors: {
        ...theme.colors,
        neutral50: "#fff",
      },
    })}
  />

My onChange function is only getting one option value at a time right now. How can I make it take multiple option value?

Hozeis · Accepted Answer · 2021-08-16 16:08:52Z

1

If you want to update state from more than one selected option, you must rewrite you're find function:

 const find = (value) => {
    setSearchUsers(value.some((element) => element.value === "Users"));
    setSearchTeams(value.some((element) => element.value === "Teams"));
    setSearchOrganizations(value.some((element) => element.value === "Organizations")
    );
  };

FYI - Array.prototype.some()

The some() method tests whether at least one element in the array passes the test implemented by the provided function

edited Aug 16, 2021 at 16:08

Hozeis

1,76218 silver badges39 bronze badges

answered Aug 16, 2021 at 10:54

Vladimir Kolinichenko

364 bronze badges

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

Collectives™ on Stack Overflow

How can I add multiple select option value in react-select

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related