How to display data from another .js file

Question

I am trying to display user login info onto a React Material UI Typography label that is nested into an App bar(Header.js) by using data from another .js file(Login.js).

Here is the relevant code from the Header.js file:

<Typography color='textSecondary' className={classes.userText}>{}</Typography>  // The label for the user info

and here is the data to be fetched from the Login.js file:

const [formData, updateFormData] = useState(initialFormData);

const handleChange = (e) => {
    updateFormData({
        ...formData,
        [e.target.name]: e.target.value.trim(),
    });
};
const [error, setError] = useState();
const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);

    axiosInstance
        .post(`token/`, {
            email: formData.email, //the data I want to be displayed on the App Bar
            password: formData.password,
        })
        .then((res) => {
            localStorage.setItem('access_token', res.data.access);
            localStorage.setItem('refresh_token', res.data.refresh);
            axiosInstance.defaults.headers['Authorization'] =
                'JWT ' + localStorage.getItem('access_token');
            history.push('/');
            //console.log(res);
            //console.log(res.data);
        
        }, reason =>{
            console.error(reason);
            setError("Invalid login details!")
            alert("Login Failed!\nIncorrect login details!");
        });

};

I am expecting to see the user email and display it in the Typography label...

Ok, update = I created a LoginContext file with the code import React, { createContext } from "react"; export const LoginContext = React.createContext(); and I am using useContext to read whatever values stored in createContext above but I don't know how to pass in values into this React.createContext(); part so that the other file will be able to use it... — akash_s93
– akash_s93, Commented Feb 12, 2023 at 11:30

goga goglika · Accepted Answer · 2023-02-07 08:54:05Z

1

you have to pass data from one component to another, and you really have 2 options here(excluding props drilling). either you pass data using React's ContextAPI, which is easier assuming you are a newbie, or you can use Redux. There is not much to go from your code so you have to read docs here

contextApi: https://refine.dev/blog/usecontext-and-react-context/

redux: https://redux.js.org/tutorials/fundamentals/part-5-ui-react

answered Feb 7, 2023 at 8:54

goga goglika

841 silver badge6 bronze badges

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

8 Comments

akash_s93 Over a year ago

Yes, I am a newbie to React.js lol

goga goglika Over a year ago

in that case, use contextAPI

akash_s93 Over a year ago

so how can I pass the const formData into the Header.js file using useContext?

goga goglika Over a year ago

read the docs first, if you cant figure it out, write what is it exactly

akash_s93 Over a year ago

ok well now I can't figure it out really lol... the user data gets logged into the console.log function that I can see when a user signs in but then how do I display it on the Typography label?

|

Collectives™ on Stack Overflow

How to display data from another .js file

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related