Getting 'undefined' at component level

Question

I am getting undefined when I run the code below. However, If I console.log the results within the hook, I get all the data

hook (works fine, fetches the data)

import { useState, useEffect } from 'react';
import axios from 'axios';

export const GetOrders = () => {
    const [data, setData] = useState();

    useEffect(() => {
        axios.get('/allorders').then(res => {
            setData(res.data);
        });
    }, []);

    console.log(data);

    return { data };
};

component (returns undefined when I log the data)

import React from 'react';
import { GetOrders } from '../hooks/orders';

export const AllOrders = () => {
    const { data } = GetOrders();

    console.log(data);
    return (
        <ul>
            {data.forEach(order => (
                <li>{order.status}</li>
            ))}
        </ul>
    );
};

Zohaib Ijaz · Accepted Answer · 2020-03-19 18:59:10Z

3

Your code looks good. Just initialize data with [] value so it will not break when you will loop over values since undefined.map() will fail

const [data, setData] = useState([]);

answered Mar 19, 2020 at 18:59

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Getting 'undefined' at component level

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