react typescript set default value multiselect

Question

I am using this module

import { MultiSelect } from "react-multi-select-component"

and creating form by this

const [selected_to2, setSelected_to2] = useState([]);

<MultiSelect
options={options2}
value={selected_to}
onChange={setSelected_to}
labelledBy="Select2"
/>

then I creating multiselect component with default value using this

  selected_to2.push({
    value: item?.Code,
    label: item?.Name
  })

but returning value with 4 time called in the multiselect form, any proper way to set default value of multiselect then also add and remove in multiselect item?

Answer 1

React state must updated by set function. Edit the value directly will not work.

So you need do

setSelected_to2(s => [...s, {
    value: item?.Code,
    label: item?.Name
}])

Answer 2

First of all you are updating state is a wrong way

• Wrong way

 selected_to2.push({
    value: item?.Code,
    label: item?.Name
  })

• Right way:

setSelected_to2([{
    value: item?.Code,
    label: item?.Name
  }
])

Here's a quick example that I did might help you, remember your default value must be an array of selected values since it's a multiselect component. JSX

import { useState } from "react";
import { MultiSelect } from "react-multi-select-component";
import "./App.css";
const options = [
  { label: "The Godfather", value: 1 },
  { label: "Pulp Fiction", value: 2 },
];
const App = ({ editMode = true }) => {
  const [value, setValue] = useState(editMode ? [options[1]] : []);
  return (
    <div className="App">
      <MultiSelect
        options={options}
        value={value}
        onChange={(selectedValues) => setValue(selectedValues)}
        labelledBy="Select2"
      />
    </div>
  );
};
export default App;