title: How to display the name of the user after login
body: <p>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 <p>Welcome{props.name}</p> on a different component but it's not working.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; {
          this.setState({
              [e.target.name]: e.target.value
          })
      }
  
      login = () =&gt; {
  
          const { email, password} = this.state;
  
          axios("/users/login", {
              method: "POST",
              data:{
                  email, 
                  password,
              }
          }).then(response =&gt; {
              localStorage.setItem('token', response.data.token);
              this.props.history.push("/track");
              console.log(response.data)
          }).catch(error =&gt; {
              console.log(error)
          })
  
      }
  
      render() {
          return (
              
              
  &lt;div&gt;
             
              &lt;div className="login-container"&gt;
                  &lt;input 
                  className="mb-3" 
                  type="text"
                  name="email"
                  value={this.state.email}
                  placeholder="Email"
                  onChange={this.handleChange} /&gt;&lt;br&gt;&lt;/br&gt;
  
                  &lt;input 
                  className="mb-3" 
                  type="password" 
                  name="password"
                  value={this.state.password}
                  placeholder="Password"
                  onChange={this.handleChange} /&gt;&lt;br&gt;&lt;/br&gt;
  
                  &lt;button className="login-button" onClick={this.login  }&gt;Sign in&lt;/button&gt;
                  &lt;p className="text-white mt-2"&gt;Not a member? &lt;Link to="/register" className="text-black"&gt;Register&lt;/Link&gt;&lt;/p&gt;
              &lt;/div&gt;
               &lt;/div&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 = () =&gt; {
          fetch(`users`)
          .then((response) =&gt; response.json())
          .then((response) =&gt; {
              this.setState({ users: response })
          })
      }
  
      addUsers = () =&gt; {
          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) =&gt; response.json())
            
              .then(response =&gt; console.log(response.msg))
              this.props.history.push("/login");
   
      }
      
  
      handleInput = (e)  =&gt; {
          const { value, name } = e.target;
      this.setState({
        [name]: value,
      });
  
      }
      render() {
          const {name, email, password, confirmpassword} = this.state;
          return (
              &lt;div&gt;
                  &lt;div className="cover d-flex justify-content-center align-items-center"&gt;
  
             
  &lt;div className="text-center login-container"&gt;
     
      &lt;input 
      className="mb-3" 
      type="text"
      placeholder="Full name"
      name="name"
      value={name}
      onChange={this.handleInput} /&gt;&lt;br&gt;&lt;/br&gt;
  
      &lt;input 
      className="mb-3" 
      type="text"
      placeholder="Email"
      name="email"
      value={email}
      onChange={this.handleInput} /&gt;&lt;br&gt;&lt;/br&gt;
  
      &lt;input 
      className="mb-3" 
      type="password" 
      placeholder="Password"
      name="password"
      value={password}
      onChange={this.handleInput}/&gt;&lt;br&gt;&lt;/br&gt;
  
      &lt;input 
      className="mb-3" 
      type="password" 
      placeholder="Confirm Password"
      name="confirmpassword"
      value={confirmpassword}
      onChange={this.handleInput}/&gt;&lt;br&gt;&lt;/br&gt;
  
      &lt;button className="signup-button" onClick={this.addUsers}&gt;Sign up&lt;/button&gt;
  
  &lt;/div&gt;
   &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>