How do I return data from multiple APIs to display on one page in React?

Question

I have two API endpoints that I am retrieving data from and I want to display the number of records in each. This is my code so far, which sort of works, and test6tg5ing the API in Postman returns the correct data -

const [orders, setOrders] = useState([]);
useEffect(() => {
  const fetchData = async () => {
    const resSeven = await axios('http://localhost:5000/api/7daycheck');
    const resThirty = await axios('http://localhost:5000/api/30daycheck');
    setOrders({ seven: resSeven.data, thirty: resThirty.data });
    };
    fetchData();
}, []);

Now, When I add console.log(orders.seven); , the console shows this -

So when I add the line {orders.seven.length} in my JSX code it throws the error "TypeError: Cannot read property 'length' of undefined". What's going on?

First of all, you initialize orders as an array (const [orders, setOrders] = useState([]);) then set it to an object (setOrders({ seven: resSeven.data, thirty: resThirty.data });); it does not make a lot of sense. Anyway, the issue is due to the fact that orders.seven is undefined until you get back the response from your fetch call. If you change {orders.seven.length} with {orders && orders.seven && orders.seven.length} you should not see that error anymore. — secan
– secan, Commented Jan 28, 2021 at 14:40

David · Accepted Answer · 2021-01-28 14:34:15Z

2

The initial state of orders is an empty array:

const [orders, setOrders] = useState([]);

Which has no property called seven. So when you try to display that state:

<p>{orders.seven.length}</p>

You'll get an error. If the resulting value for orders isn't an array then you shouldn't set it to one to begin with. Give it the structure you expect:

const [orders, setOrders] = useState({ seven: [] });

This would initialize it to an object with a property called seven which itself is an empty array. Then the length will correctly be 0.

answered Jan 28, 2021 at 14:34

David

221k42 gold badges245 silver badges337 bronze badges

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

Collectives™ on Stack Overflow

How do I return data from multiple APIs to display on one page in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related