I need to load the content of Multiselect component dynamically

Issue

This Content is from Stack Overflow. Question asked by Gautam Bhat

I have the content (states) in data?.[0]?.location and trying to load this in Multiselect component as below.

                <Multiselect
                  displayValue="location"
                  showCheckbox
                  selectedValues={checked}
                  options={
                    data?.[0]?.location.map((item, index) => (index, item.state))
                    
                    // data?.[0]?.location
                  }
                  onSelect={(event) => {
                    setChecked(event);
                  }}
                  value={checked}
                  style={{
                    multiselectContainer: {
                      boxShadow: "0px 3px 6px #00000029",
                    },
                    searchBox: {
                      minHeight: 54,
                      PaddingTop: 10
                    }
                  }}

                />

With the above code the Multiselect box does not show the content (state names) but just the checkboxes. To address this I am trying to save the content of data?.[0]?.location into a const variable with following code,

           const [checked, setChecked] = React.useState([]);

             const getLocation = () => {
                try {
                   alert("CALLED")
                  // if (data?.[0]?.location.map) {
                   // const res = data?.[0]?.location.map();
                  const res = data?.[0]?.location.map((item, index) => (index, 
                  item.state))
                  setChecked(res?.data);
                  console.log(res?.data)
                   return res;
                 // }
               } catch (err) {
                       throw err;
               }
            };
            console.log(checked)

But this does not work.



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?