Hi all!

I like to display user's name and picture on navigation bar & home page once user log in.

React

1. log in button to log out button once user logged in,

2. display user's name on navigation bar next to log out button (maybe have drop bar option to edit profile and logout??)

3. display user's name on home page

here is my code, very simple..

login.jsx

import React, {useState} from "react" import {userLogin} from "../../services/userService"

function Login(){ const [formData, setFormData] = useState({ email:"", password:"", tenantId:"1234", });

const onFormFieldChange= event =>{ console.log("onChange", { syntheticEvent: event });

const target = event.target;

const newUserValue = target.value;

const nameOfField = target.name; setFormData ((prevState)=>{

const newUserObject ={...prevState}; newUserObject[nameOfField] = newUserValue; console.log("new user value", newUserValue) return newUserObject; }); };

const onClickLogin=(e)=>{ e.preventDefault(); userLogin(formData) .then(onUserLoginSuccess) .catch(onUserLoginError);

}

const onUserLoginSuccess=()=> console.log( "You have logged in successfully!","Login success")

const onUserLoginError=()=>console.log("Please check your email or password","Login Failed")

return (

Email address

Password

)

} export default Login;

Navigation.jsx

import React from 'react'

import {Link} from 'react-router-dom'

function SiteNavigation (){

return

Login

}

export default SiteNavigation;

Home.jsx

import React from 'react'

import {getCurrentUser} from.... (whatever ajax.js location)

function Home(){

return (

Hello _____________________<- here, I would like to put current logged in user's name

)}

export default Home.

ajax.js

import axios from "axios"

const endpoint = "xxxxxxxx/api/users"

const userLogin =(payload)=>{

const config ={

method: "post",

url: endpoint +"/login" data: payload,

crossdomain: true}

return axios (config)

}

const currentUser =(payload)=>{

const config ={

method: "GET",

url: endpoint +"/current" data: payload,

crossdomain: true}

return axios (config)

}

export default {userLogin, getCurrentuser}