React-select multiple selects on one page-CodePudding

I am a bit confused, here is an example with a couple of select inputs that have the same state, please check here: https://stackblitz.com/edit/get-selected-by-value-multi-select-react-agamk4?file=src/App.js so please:

How can I make it so when I select an option the value does not apply to the rest of the select inputs?
How would you put the values in the store for each of the selects?
Do I need multiple stores?

For more clarity, here is a screenshot: https://www.awesomescreenshot.com/image/19798040?key=bb839c650c93b436066e03d33d5515b0 I hope this makes sense? What would be the best approach? Thank you.

CodePudding user response：

I have shared the code in case of only a single state. You can use this method if you want only a single state but having multiple states for different select inputs also won't be bad as you have only 3 inputs. Having single state method would be useful if number of select inputs would have more.

import React, { useState } from 'react';
import Select from 'react-select';

function App() {
  const data = [
    {
      value: 1,
      label: 'cerulean',
    },
    {
      value: 2,
      label: 'fuchsia rose',
    },
    {
      value: 3,
      label: 'true red',
    },
    {
      value: 4,
      label: 'aqua sky',
    },
    {
      value: 5,
      label: 'tigerlily',
    },
    {
      value: 6,
      label: 'blue turquoise',
    },
  ];

  // set value for default selection
  const [selectedValue, setSelectedValue] = useState([
    { value: [] },
    { value: [] },
    { value: [] },
  ]);

  // handle onChange event of the dropdown
  const handleChange = (e, no) => {
    setSelectedValue(
      selectedValue.map((item) => {
        return selectedValue.indexOf(item) === no
          ? { value: Array.isArray(e) ? e.map((x) => x.value) : [] }
          : item;
      })
    );
  };

  return (
    <div className="App">
      <Select
        className="dropdown"
        placeholder="Select Option"
        value={data.filter((obj) => selectedValue[0].value.includes(obj.value))} // set selected values
        options={data} // set list of the data
        onChange={(event) => handleChange(event, 0)} // assign onChange function
        isMulti
        isClearable
      />
      <br />
      <Select
        className="dropdown"
        placeholder="Select Option"
        value={data.filter((obj) => selectedValue[1].value.includes(obj.value))} // set selected values
        options={data} // set list of the data
        onChange={(event) => handleChange(event, 1)} // assign onChange function
        isMulti
        isClearable
      />
      <br />
      <Select
        className="dropdown"
        placeholder="Select Option"
        value={data.filter((obj) => selectedValue[2].value.includes(obj.value))} // set selected values
        options={data} // set list of the data
        onChange={(event) => handleChange(event, 2)} // assign onChange function
        isMulti
        isClearable
      />

      {selectedValue && (
        <div style={{ marginTop: 20, lineHeight: '25px' }}>
          <div>
            <b>Selected Value: </b> {JSON.stringify(selectedValue, null, 2)}
          </div>
        </div>
      )}
    </div>
  );
}

export default App;