PrimeReact Select Item is empty after loading data from API

Question

My Functional component is as follows:

const Scratch = () => {

 const [isLoaded, setIsLoaded] = useState(false);
 const colorSelectItems=[];
 const [selectedColor, setSelectedColor] = useState("fffff");

 useEffect(() => {
    fetch(
           `http://localhost:8765/fetchData?userId=1`
         )
      .then((response) => response.json())
      .then((data) => {
       createDropDown(data));
       setIsLoaded(true);
      });
  }, []);

 const createDropDown= (data) => {
    data.map((color) => {
      colorSelectItems.push({
        label: color.colorName,
        value: color.hexValue,
      });
    });

 return (
     <div className="commonMargin">
         {!isLoaded&& <p>Loading..</p>}
         {isLoaded&& (
           <Dropdown
            value={selectedColor}
            optionLabel="label"
            options={colorSelectItems}
            onChange={(e) => setSelectedColor(e.target.value);}
           />
          )}
     </div>
  );
};

export default Scratch;

The problem is, it is displaying Loading... until the API call is complete, and it is rendering DropDown after that. But even after the completion of API call, the DropDown is still empty!

What am I missing here?

PS: This DropDown works perfectly if I replace fetching data from API to fetching data from local json file

You need to set the state in order to re-render the component. — Yash Joshi, Feb 12 '21 at 05:49
@YashJoshi I tried `useState([])` for the colorSelectItems. But it is rendering `bound dispatchAction` as one of the select item — Harihara_K, Feb 12 '21 at 05:54
Can you create a CodeSandbox app, to replicate the issue. Just go to https://react.new to create the issue. — Yash Joshi, Feb 12 '21 at 06:12

score 2 · Accepted Answer · answered Mar 02 '21 at 03:32

Try this .In case any problem plz reply

const Scratch = () => {

 const [isLoaded, setIsLoaded] = useState(false);
 const colorSelectItems=[];
 const [selectedColor, setSelectedColor] = useState("fffff");

 useEffect(() => {
    fetch(
           `http://localhost:8765/fetchData?userId=1`
         )
      .then((response) => response.json())
      .then((data) => {
       var temp=data?.map((item)=>({label: item?.colorName,
        value: item?.hexValue }));
       colorSelectItems=temp;
       setIsLoaded(true);
      });
  }, []);
     
 return (
     <div className="commonMargin">
         {!isLoaded&& <p>Loading..</p>}
         {isLoaded&& (
           <Dropdown
            value={selectedColor}
            optionLabel="label"
            options={colorSelectItems}
            onChange={(e) => setSelectedColor(e.target.value);}
           />
          )}
     </div>
  );
};

export default Scratch;

Yeah, I had solved the issue in the similar way; with one change. `const [colorSelectItems,setColorSelectItems]=useState([]);` and then instead of `colorSelectItems=temp;` ,I used `setColorSelectItems(temp)` . — Harihara_K, Mar 02 '21 at 16:27

PrimeReact Select Item is empty after loading data from API

1 Answers1