CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
akash_s93
akash_s93

Reputation: 5

How to display data from another .js file

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...

Upvotes: 0

Views: 83

Answers (1)

goga goglika
goga goglika

Reputation: 84

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

Upvotes: 1

Related Questions