title: Data not refreshing after login to homepage in reactjs
body: <p>I'm saving userdata to <code>localStorage</code> in login component and then redirecting to the homepage. In homepage username is not updating on first visit. I have to reload the page. Then data binds to page after refresh. Please help how can I show data on first visit?</p>
  
  <p>below is my homepage code</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  
  export default class Header extends Component {
    constructor(props) {
      super(props);
      this.state = {
        isLogin: false,
        isLogout: false,
        user: ""
      };
    }
  
    componentDidMount() {
      const userData = localStorage.getItem("userData");
      const user = JSON.parse(userData);
      this.setState({ user: user });
      if (userData) {
        this.setState({ isLogin: true });
      }
      console.log(userData);
      console.log(user);
    }
  
    logout = e =&gt; {
      e.preventDefault();
      localStorage.clear();
      this.setState({ isLogout: true });
    };
  
    render() {
      if (this.state.isLogin === false || this.state.isLogout === true) {
        return (
          &lt;header
            id="kr-header"
            className="kr-header cd-auto-hide-header kr-haslayout"
          &gt;
            &lt;div className="container"&gt;
              &lt;div className="row"&gt;
                &lt;div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
                  &lt;strong className="kr-logo"&gt;
                    &lt;Link to="/"&gt;
                      &lt;img src="images/logo.png" alt="company logo here" /&gt;
                    &lt;/Link&gt;
                  &lt;/strong&gt;
                  &lt;nav className="kr-addnav"&gt;
                    &lt;ul&gt;
                      &lt;li&gt;
                        &lt;Link
                          id="kr-btnsignin"
                          className="kr-btn kr-btnblue"
                          to="login_register"
                        &gt;
                          &lt;i className="icon-smiling-face" /&gt;
                          &lt;span&gt;Join Now&lt;/span&gt;
                        &lt;/Link&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                        &lt;a
                          className="kr-btn kr-btngreen"
                          href="dashboardaddlisting.html"
                        &gt;
                          &lt;i className="icon-plus" /&gt;
                          &lt;span&gt;Add Listing&lt;/span&gt;
                        &lt;/a&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/nav&gt;
                  &lt;nav id="kr-nav" className="kr-nav"&gt;
                    &lt;div className="navbar-header"&gt;
                      &lt;button
                        type="button"
                        className="navbar-toggle collapsed"
                        data-toggle="collapse"
                        data-target="#kr-navigation"
                        aria-expanded="false"
                      &gt;
                        &lt;span className="sr-only"&gt;Toggle navigation&lt;/span&gt;
                        &lt;span className="icon-bar" /&gt;
                        &lt;span className="icon-bar" /&gt;
                        &lt;span className="icon-bar" /&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div
                      id="kr-navigation"
                      className="collapse navbar-collapse kr-navigation"
                    &gt;
                      &lt;ul&gt;
                        &lt;li&gt;
                          &lt;a href="dashboard.html"&gt;Dasboard&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/div&gt;
                  &lt;/nav&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/header&gt;
        );
      } else {
        return (
          &lt;header
            id="kr-header"
            className="kr-header cd-auto-hide-header kr-haslayout"
          &gt;
            &lt;div className="container"&gt;
              &lt;div className="row"&gt;
                &lt;div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
                  &lt;strong className="kr-logo"&gt;
                    &lt;Link to="/"&gt;
                      &lt;img src="images/logo.png" alt="company logo here" /&gt;
                    &lt;/Link&gt;
                  &lt;/strong&gt;
                  &lt;nav className="kr-addnav"&gt;
                    &lt;ul&gt;
                      &lt;li&gt;
                        &lt;Link
                          id="kr-btnsignin"
                          className="kr-btn kr-btnblue"
                          to="login_register"
                        &gt;
                          &lt;i className="icon-smiling-face" /&gt;
                          &lt;span&gt;{this.state.user.user.firstname}&lt;/span&gt;
                        &lt;/Link&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                        &lt;a
                          className="kr-btn kr-btngreen"
                          href="dashboardaddlisting.html"
                        &gt;
                          &lt;i className="icon-plus" /&gt;
                          &lt;span&gt;Add Listing&lt;/span&gt;
                        &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                        &lt;a onClick={this.logout} className="kr-btn kr-btngreen"&gt;
                          &lt;i className="icon-plus" /&gt;
                          &lt;span&gt;Logout&lt;/span&gt;
                        &lt;/a&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/nav&gt;
                  &lt;nav id="kr-nav" className="kr-nav"&gt;
                    &lt;div className="navbar-header"&gt;
                      &lt;button
                        type="button"
                        className="navbar-toggle collapsed"
                        data-toggle="collapse"
                        data-target="#kr-navigation"
                        aria-expanded="false"
                      &gt;
                        &lt;span className="sr-only"&gt;Toggle navigation&lt;/span&gt;
                        &lt;span className="icon-bar" /&gt;
                        &lt;span className="icon-bar" /&gt;
                        &lt;span className="icon-bar" /&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div
                      id="kr-navigation"
                      className="collapse navbar-collapse kr-navigation"
                    &gt;
                      &lt;ul&gt;
                        &lt;li&gt;
                          &lt;a href="dashboard.html"&gt;Dasboard&lt;/a&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/div&gt;
                  &lt;/nav&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/header&gt;
        );
      }
    }
  }
  </code></pre>
  
  <p>Below is login-register component code</p>
  
  <pre><code>import React, {Component} from 'react';
  import { Link,Redirect ,withRouter } from 'react-router-dom';
  import PropTypes from "prop-types";
  import Otp from './otp';
  import axios from '../api';
  
  export default class LoginRegister extends Component {
      static contextTypes = {
          router: PropTypes.object
        }
      constructor(props,context){
          super(props,context);
          this.state = {
              fname:'',
              lname:'',
              emailaddress:'',
              password:'',
              mobile:'',
              user:'',
              login_pass:'',
              isLogin:false
          }
          this.regi_data = this.regi_data.bind(this);
          this.login_data = this.login_data.bind(this);
          // this.otpModalRef = React.createRef();
      }
  
      regi_data(e){
          this.setState({[e.target.name] : e.target.value}
          );
      }
      login_data(e){
          this.setState({[e.target.name] : e.target.value})
      }
  
      // otpModalRef = ({onOpenModal}) =&gt; {
      //    this.showModal = onOpenModal;
      // }
  
      componentDidMount(){
          if (localStorage.getItem('userData')) {
              this.context.router.history.push({
                          pathname:'/',
  
                      });
          }
      }
  
  
  
  
      login = (e) =&gt; {
          e.preventDefault();
           axios.post('/api/signin', { 
                          user:this.state.user,
                          password:this.state.login_pass,
                      })
            .then(res =&gt; {
                  //console.log(res);
                  localStorage.setItem('userData', JSON.stringify(res.data));
                  this.context.router.history.push({
                          pathname:'/',
  
                      });
  //                  window.location.reload();
                      this.setState({isLogin: true});
            })
            .catch(function (error) {
              console.log(error.message);
            })
      }
  
      register = (e) =&gt; {
          e.preventDefault(); 
          axios.post('/api/user/add', { 
                          firstname: this.state.fname,
                          lastname:this.state.lname,
                          email:this.state.emailaddress,
                          password:this.state.password,
                          mobile:this.state.mobile 
                      },              
                  )
            .then(res =&gt; {
                  console.log(res);
                  // this.showModal();
                   this.context.router.history.push({
                          pathname:'/otp_validate',
                      });            
            }).catch(function(error){
              alert(error.message)
            })
      }
  </code></pre>