how to set dynamic select items in react-multi-select-component in reactjs

Question

import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";
const Example = () => {
  const options = [
    { label: "Grapes", value: "grapes" },
    { label: "Mango", value: "mango" },
    { label: "Strawberry", value: "strawberry", disabled: true },
    { label: "Watermelon", value: "watermelon" },
    { label: "Pear", value: "pear" },
  ];
const [selected, setSelected] = useState([]);
return (
  <div>
   <h1>Select Fruits</h1>
   <pre>{JSON.stringify(selected)}</pre>
   <MultiSelect
    options={options}
    value={selected}
    onChange={setSelected}
    labelledBy="Select"
   />
  </div>
 );
};

export default Example;

This code is working fine. But i'm not getting how to checked items dynamically. how should i passed checked value for 2 and 3 options if i want. Thank in advance

Are you having an issue selecting multiple items or are you trying to set the starting value? — Moshe Sommers
– Moshe Sommers, Commented Jun 17, 2021 at 16:30
i'm able to select multiple options. after setting value={[...]} i'm not able to select any other option or not able to de-select which are already checked — Kodali444
– Kodali444, Commented Jun 17, 2021 at 16:40
is the "Custom Value Renderer" can be used for this purpose npmjs.com/package/react-multi-select-component — Kodali444
– Kodali444, Commented Jun 17, 2021 at 16:43
I just copied your original code you posted and it works fine. I am not sure what you are trying to accomplish? — Scott
– Scott, Commented Jun 17, 2021 at 16:53
@Rao I think I understand what you want now --- see my answer below — Scott
– Scott, Commented Jun 17, 2021 at 17:04

Scott · Accepted Answer · 2021-06-17 17:02:49Z

2

If you want the list to initialize with pre-selected items, you need to pass the selected prop correctly. Currently you pass an empty array. Try this:


import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";
const App = () => {
    const options = [
          { label: "Grapes", value: "grapes" },
          { label: "Mango", value: "mango" },
          { label: "Strawberry", value: "strawberry", disabled: true},
          { label: "Watermelon", value: "watermelon" },
          { label: "Pear", value: "pear" },
        ];
  // preset some selected values for first render
  const [selected, setSelected] = useState(options.slice(0,2)); 
  
  return (
      <div>
           <h1>Select Fruits</h1>
           <pre>{JSON.stringify(selected)}</pre>
           <MultiSelect
                 options={options}
                 value={selected}
                 onChange={setSelected}
                 labelledBy="Select"
                />
          </div>
     );
};

export default App;

edited Jun 17, 2021 at 17:02

answered Jun 17, 2021 at 16:26

Scott

4421 gold badge4 silver badges18 bronze badges

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

2 Comments

Kodali444 Over a year ago

Hi Scott, i'm able to checked values using this solution. but not able to check or uncheck options. any suggestion

Kodali444 Over a year ago

Thank you @scott, this working exactly how i need.

Collectives™ on Stack Overflow

how to set dynamic select items in react-multi-select-component in reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related