Data not loading on front end

Question

I have a dashboard displaying links based on user type when you register you choose your role 1, 2, 3, 4, 5. Everything works fine except when pulling data from the DB and showing it on the front end. On insomnia if I send a command adminId: 1 it returns the correct data. Below is the code where I tie the adminId to the data to display the correct links but nothing happens. If anyone can help it would be great! I am storing the adminId in userData and pulling the links from the backend using axios.

    const { userData } = useContext(UserContext);
    const history = useHistory();
    const [links, setLinks] = useState();

    const currAdmin = () => {
        currAdmin = userData.user.adminId;
    }

useEffect(() => {
    if (!userData.user)
        history.push("/");
    const checkAdmin = async () => {

        const adminRes = await axios.get('http://localhost:9000/Links/all', { currAdmin });
        setLinks(adminRes.data);
    };
    checkAdmin();
});

return (

    <div className="dashboard">
        <Header />
        <br />
        <br />
        <h3> Admin Type: </h3>
        <ListGroup className="linklist" >
            {links && links.map(e => (
                <ListGroup.item key={e.adminId}>
                    {e.links}
                </ListGroup.item>
            ))}
        </ListGroup>

    </div>

);

}

The second parameter to the axios.get function is a request config https://github.com/axios/axios#request-config there's no property called currAdmin mentioned in the docs so whatever you think this `{ currAdmin }` does it doesn't. Also you define currAdmin as a const function --> `const currAdmin = () => {` and then trying to change it --> `currAdmin = userData.user.adminId;` This can't work. If you want to send the value of currAdmin to your server then just append it to url --> `axios.get('http://localhost:9000/Links/all?currAdmin=' + currAdmin)` currAdmin must be string. — Molda, Nov 30 '20 at 08:55
@Molda So essentially if adminId is of value = number and not a string would something such as the code below be valid or would this still be an error? `let currAdmin = userData.user.adminId; const adminRes = await axios.get('http://localhost:9000/Links/all', { currAdmin } );` — aaagggg1233, Nov 30 '20 at 09:15
You still don't seem to understand that this `{ currAdmin }` is not sent to the server in any way. Axios ignores it as it is not what it expects in request config. Can you show how you send the id using insomnia? — Molda, Nov 30 '20 at 09:54
@Molda sure I do a GET request with http://localhost:9000/Links/all I then do a JSON text and send `{ "adminId" : "1" }` This then returns me the link that is attached to the adminId 1 — aaagggg1233, Nov 30 '20 at 09:59
You can't(shouldn't) send a json using GET request. Many servers ignores a body in GET request. See this https://stackoverflow.com/questions/978061/http-get-with-request-body So either use POST request or pass the id in url like i already said `axios.get('http://localhost:9000/Links/all?currAdmin=' + currAdmin)` then on your server you can access it as `req.query.currAdmin` — Molda, Nov 30 '20 at 10:29
@Molda Thanks so much for the references and explanations finally made sense and I got it to work on the front end — aaagggg1233, Nov 30 '20 at 10:46

score 0 · Answer 1 · answered Nov 30 '20 at 09:00

For your reference, Please let me know if it will help you.

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

function FetchAPIData(props) {

    const [myData, setData] = useState({ data:[] });

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(`http://dummy.restapiexample.com/api/v1/employees`,);
            setData(result.myData);
        };
        fetchData();
    }, []);

    return (
        <div>
            <span>{JSON.stringify(myData)}</span>
            <ul>
                {
                    myData.data.map(item => {
                        <li key={item.id}>
                            {item.employee_name}
                        </li>
                    })
                }
            </ul>
        </div>
    );
}

export default FetchAPIData;

I follow what you are doing but it seems the way I am doing my axios.get is incorrect. In my schema adminId is a number so I am not sure how to append it to the get.axios function to extract the link that contains the adminId 2 for example. Using Insomnia to test the axios.get it works fine and sends back the data I need. I suppose my error is in the front end. I save adminId with userContext so I know the value is for sure stored there. — aaagggg1233, Nov 30 '20 at 09:20

Data not loading on front end

1 Answers1