How to display the name of the user after login

I'm new in React and just manage to make to login and registration page with JWT and MySQL, but now I would like the name of the user to appear when the user is logged in. Can someone help me? I shared my login and register component. I thought that I could that by adding something like

Welcome{props.name}

on a different component but it's not working.

import React, { Component } from 'react';  import './Login.css';  import axios from 'axios';  import {Link} from "react-router-dom";    export default class Login extends Component {      constructor(props) {          super(props);          this.state = {              email: "",              password: "",          }      }        handleChange = (e) => {          this.setState({              [e.target.name]: e.target.value          })      }        login = () => {            const { email, password} = this.state;            axios("/users/login", {              method: "POST",              data:{                  email,                   password,              }          }).then(response => {              localStorage.setItem('token', response.data.token);              this.props.history.push("/track");              console.log(response.data)          }).catch(error => {              console.log(error)          })        }        render() {          return (                              <div>                           <div className="login-container">                  <input                   className="mb-3"                   type="text"                  name="email"                  value={this.state.email}                  placeholder="Email"                  onChange={this.handleChange} /><br></br>                    <input                   className="mb-3"                   type="password"                   name="password"                  value={this.state.password}                  placeholder="Password"                  onChange={this.handleChange} /><br></br>                    <button className="login-button" onClick={this.login  }>Sign in</button>                  <p className="text-white mt-2">Not a member? <Link to="/register" className="text-black">Register</Link></p>              </div>               </div>          )      }  }

import React, { Component } from 'react'    export default class Register extends Component {      constructor(props) {          super(props);          this.state = {             users: [],             name: "",             email: "",             password: "",             confirmpassword : ""                       }      }        componentDidMount() {          this.getUsers();      }        getUsers = () => {          fetch(`users`)          .then((response) => response.json())          .then((response) => {              this.setState({ users: response })          })      }        addUsers = () => {          const { name, email, password, confirmpassword } = this.state;          fetch(`/users`, {              method: "POST",              headers: {                  "Content-type": "application/json",              },              body: JSON.stringify({name, email, password, confirmpassword}),          })                    .then((response) => response.json())                          .then(response => console.log(response.msg))              this.props.history.push("/login");         }              handleInput = (e)  => {          const { value, name } = e.target;      this.setState({        [name]: value,      });        }      render() {          const {name, email, password, confirmpassword} = this.state;          return (              <div>                  <div className="cover d-flex justify-content-center align-items-center">                 <div className="text-center login-container">           <input       className="mb-3"       type="text"      placeholder="Full name"      name="name"      value={name}      onChange={this.handleInput} /><br></br>        <input       className="mb-3"       type="text"      placeholder="Email"      name="email"      value={email}      onChange={this.handleInput} /><br></br>        <input       className="mb-3"       type="password"       placeholder="Password"      name="password"      value={password}      onChange={this.handleInput}/><br></br>        <input       className="mb-3"       type="password"       placeholder="Confirm Password"      name="confirmpassword"      value={confirmpassword}      onChange={this.handleInput}/><br></br>        <button className="signup-button" onClick={this.addUsers}>Sign up</button>    </div>   </div>              </div>          )      }  }

https://stackoverflow.com/questions/67029563/how-to-display-the-name-of-the-user-after-login April 10, 2021 at 07:51AM