Open ObaidAshiq opened 11 months ago
I switched the use from AsyncSelect to Select and from loadOptions props to useEffect
`import { useState,useEffect } from "react";
// import AsyncSelect from "react-select/async";
import Select from 'react-select';
import { toast } from "react-toastify";
import ToastMsg from "../UI/ToastMsg";
const DynamicMultiSelect = ({ fieldNames, selectedDataModel, fieldName }) => {
const [options, setOptions] = useState({});
//Used useEffect to fetch options when the component mounts for the first time, i.e. everytime the map was used
useEffect(() => {
loadOptions()
}, [])
const handleChange = (selectedOption)=>{
console.log('HandleChange',selectedOption)
}
const loadOptions = async (searchValue,callback) => {
console.log(searchValue)
try {
const response = await fetch(
process.env.NEXT_PUBLIC_API_DOMAIN + "/nautobot/charts/filterValues",
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
dataModel: selectedDataModel,
filterKey: fieldName,
}),
}
);
const data = await response.json();
console.log('Firldname', fieldName, '==========',data.values)
const loadedOptions = data?.values?.map((option) => ({
label: option.toString(),
value: option.toString(),
}));
setOptions(loadedOptions );
} catch (error) {
console.error("Error fetching data:", error);
const errorToast = () => {
toast.error(<ToastMsg message={error} />, {
hideProgressBar: true,
progress: undefined,
});
};
errorToast();
}
};
return (
<div>
<label>
{/* {console.log('Options',options)} */}
{fieldName}
<Select
options={options}
isMulti
onChange={handleChange}
placeholder={`Select ${fieldName}`}
/>
</label>
</div>
);
};
export default DynamicMultiSelect;`
Disclaimer
I am dynamicallly generating multiple DynamcMultiSelect components using map function on a array which I am fetching from API. Bascically I have a ADD button which creates a modal which has a dropdown, when a user select a value from it I am fetching an array from the backend, which will be used to make multiple DynamicMultiSelectComponents which use react-select. But when I click on any of the i am getting no Options, but when I type something I am getting all the values,
DynamicMultiSelect Component `
Creating this component
` {nonNumberedFields.map((fieldName)=> (
Images Scene 1![image](https://github.com/JedWatson/react-select/assets/133643704/4f7a7728-2e4c-4fdb-a6ba-2bb095cdc638)
Scene 2![image](https://github.com/JedWatson/react-select/assets/133643704/4f65262b-ed7b-496a-a4fc-637de730efa8)
Scene 3![image](https://github.com/JedWatson/react-select/assets/133643704/0e074047-b4e6-49f3-852b-624344fadd04)
Scene 4![image](https://github.com/JedWatson/react-select/assets/133643704/3d1f73ad-fcd6-4ab8-8724-714df1cd1fea)