Why is axios not displaying data in front end using useState, useEffect

Viewed 110

get() working. When I got to the link and manually type currAdmin = 1 It displays the data I need. Right now it wont display in my front end when I call it. This is what I have done so far. My Dashboard page

import React, { useState, useEffect, useContext } from 'react';
import UserContext from '../context/UserContext';
import { useHistory, Link } from 'react-router-dom';
import Header from "./Header"
import { ListGroup, } from 'react-bootstrap';
import axios from 'axios';
import LinkTime from './LinkTime';

function Dashboard() {
    const { userData } = useContext(UserContext);
    const history = useHistory();

    useEffect(() => {
        if (!userData.user)
            history.push("/");
    }, []);

    useEffect(() => {
        getAllLinks();
    }, []);

    const [mylinks, getLinks] = useState('');

    const getAllLinks = () => {
        let currAdmin = userData.user.adminId;
            axios.get('http://localhost:9000/Links/all?currAdmin=' + currAdmin)
            .then((response) => {
                const allLinks = response.data.mylinks.allLinks;
                getLinks(allLinks);
            })
            .catch(error => console.error('Error'));
    }


    return (

        < LinkTime mylinks={mylinks} />
    );




}

This is my LinkTime file where I have my child function

import React from 'react'; 

export default function LinkTime(props) {
    console.log(props.mylink);

    const displayLinks = (props) => {
        const { mylinks } = props;

        if (mylinks.length > 0) {
            return (
                mylinks.map((mylink, index) => {
                    console.log(mylink);
                    return (
                        <div className='adminId' key={mylink._id}>
                            <p className="links"> {mylink.links} </p>
                             <h1 class="ID"> {mylink.adminId} </h1>
                        </div >
                    )
                })
            )

        } else {
           return <h2> no </h2>
        }
    }

    return (

        <>
            <h3> {displayLinks(props)} </h3>

        </>
    );
}

At the moment it only displays the else statement which is no. What am I doing wrong here that the data being called with axios isnt being received? On powershell it seems to grab the data. Any ideas would help!

0 Answers
Related