I want show data in dropdown using api in react js using axios

Question

I want to show data in select option dropdown list using AXIOS .But when I consume data from API it continuously rotate in infinite loop and don't show data in API.I am using functional component for this.

API data shown in below format:

{
    "status": 1,
    "data": [
        {
            "_id": "62982a3d8779cc4a00139ca0",
            "name": "List Category",
            "status": true,
            "createdAt": "2022-06-02T03:10:53.326Z",
            "updatedAt": "2022-06-02T03:10:53.326Z",
            "__v": 0
        },
        {
            "_id": "62984a1f3cb4c9170532736b",
            "name": "Event Name",
            "status": true,
            "createdAt": "2022-06-02T05:26:55.282Z",
            "updatedAt": "2022-06-02T05:26:55.282Z",
            "__v": 0
        }
    ],
    "message": "List categories list."
}

React Code:

const handleInputChange = (value) => {
  setValue(value);
};

// handle selection
const handleChange = (value) => {
  // setSelectedValue(value);
};

const fetchData = () => {
  axios
    .get('http://localhost:5080/list-categories')
    .then((response) => {
      const { data } = response;
      const arrayOfObj = Object.entries(data).map((e) => ({ [e[0]]: e[1] }));
      let tempArray = arrayOfObj.map((item, index) => {
        item.label = item.name;
        item.value = item.name;
        item.id = item.id;
        return item;
      });

      setSelectedValue(tempArray);
    })
    .catch((error) => console.log(error));
};
fetchData();

<select
  disabled={false}
  value={selectedValue}
  onChange={(e) => setSelectedValue(e.currentTarget.value)}
>
  {selectedValue.map(({ label, value }) => (
    <option key={value} value={value}>
      {label}
    </option>
  ))}
</select>;

When I run this code it run in infinite loop and it is not showing any value in dropdown .I just want to show data in dropdown list using API . But this code doesn't work .Please help me to fix it out. I am new to react. I think I have issue in loop .Please check. I want to show data in select option dropdown list using AXIOS

Nishad Cp · Accepted Answer · 2022-06-06 07:38:32Z

try api call like thing inside useEffect of react and use state variables store variables in react

check this out for more details https://reactjs.org/docs/hooks-overview.html

and your code becoms like

import React, { useEffect, useState } from 'react';
 
function app(props) {
    const [select, setSelected]  = useState('');
    const [optionList,setOptionList] = useState([]);
    const fetchData = () => {
        axios
          .get('http://localhost:5080/list-categories')
          .then((response) => {
            const { data } = response;
            if(response.status === 200){
                //check the api call is success by stats code 200,201 ...etc
                setOptionList(data)
            }else{
                //error handle section 
            }
          })
          .catch((error) => console.log(error));
      };

    useEffect(()=>{
        fetchData();
    },[])
    return (
        <select
            disabled={false}
            value={select}
            onChange={(e) => setSelected(e.currentTarget.value)}
        >
            {optionList.map((item) => (
            <option key={item._id} value={item.name}>
                {label.name}
            </option>
            ))}
        </select>
    );
}

export default app;

lpizzinidev · Accepted Answer · 2022-06-06 07:18:37Z

0

Try to nest your fetchData call into a useEffect hook call to avoid the loop:

useEffect(() => {
    const fetchData = () => {
        axios
          .get('http://localhost:5080/list-categories')
          .then((response) => {
            const { data } = response;
            const arrayOfObj = Object.entries(data).map((e) => ({ [e[0]]: e[1] }));
            let tempArray = arrayOfObj.map((item, index) => {
              item.label = item.name;
              item.value = item.name;
              item.id = item.id;
              return item;
            });
      
            setSelectedValue(tempArray);
          })
          .catch((error) => console.log(error));
      };
      fetchData();
}, []);

Also, try to add a conditional check to wait for the data to be loaded:

<select
  disabled={false}
  value={selectedValue}
  onChange={(e) => setSelectedValue(e.currentTarget.value)}
>
  {!selectedValue ? (
    <>Loading data...</>
  ) : selectedValue.length === 0 ? (
    <>No data found</>
  ) : (
    selectedValue.map(({ label, value }) => (
      <option key={value} value={value}>
        {label}
      </option>
    ))
  )}
</select>;

edited Jun 6, 2022 at 7:18

answered Jun 6, 2022 at 7:08

lpizzinidev

13.3k2 gold badges15 silver badges32 bronze badges

2 Comments

Nidhi Mahajan Over a year ago

item {message: 'List categories list.', label: undefined, value: undefined, id: undefined} id: undefined label: undefined message: "List categories list." value: undefined. Getting this iisue

lpizzinidev Over a year ago

Try to add a conditional rendering condition to check if the data has been loaded (edited answer)

Collectives™ on Stack Overflow

I want show data in dropdown using api in react js using axios

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related