title: How to stay login after refresh the page in react js
body: <p>I have a problem when i refresh the page , the page automatically return false isLogin. i dont know, i already tried many times and ask to stackoverflow but no result. as we know . the browser will refresh the page if we try to edit the code and save it. and then wehen i try to console the props isloggin, when i login it return true, but whenn refresh the page, it return false. @.@</p>
  
  <p>index.js</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { createStore } from 'redux'
  import { Provider } from 'react-redux'
  import { Router, Route, Switch} from "react-router-dom";
  import { createHashHistory } from 'history';
  
  import "assets/vendor/nucleo/css/nucleo.css";
  import "assets/vendor/@fortawesome/fontawesome-free/css/all.min.css";
  import "assets/scss/argon-dashboard-react.scss";
  
  import AdminLayout from "layouts/Admin.js";
  import reducer from './components/reducers'
  import LandingLogin from './layouts/LandingLogin.js'
  import LandingRegister from './layouts/LandingRegister.js'
  
  
  const store = createStore(reducer);
  const customHistory = createHashHistory();
  
  
  
  ReactDOM.render(
    &lt;Provider store = {store}&gt;
        &lt;Router history={customHistory}&gt;
          &lt;Switch&gt;
            &lt;Route path="/admin" render={props =&gt; &lt;AdminLayout {...props} /&gt;} /&gt;
            &lt;Route exact path="/" render= {() =&gt; &lt;LandingLogin/&gt;} /&gt;
            &lt;Route exact path="/login" render= {() =&gt; &lt;LandingLogin/&gt;} /&gt;
            &lt;Route exact path="/register" render= {() =&gt; &lt;LandingRegister/&gt;} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
    &lt;/Provider&gt;,
    document.getElementById("root")
  );
  
  </code></pre>
  
  <p>login.js</p>
  
  <pre><code>import React, { Fragment } from 'react'
  import { connect } from 'react-redux'
  import { userLogin } from '../../actions/index'
  import axios from 'axios';
  import { createHashHistory } from 'history';
  
  // reactstrap components
  import {
    Button,
    Card,
    CardBody,
    FormGroup,
    Form,
    Input,
    InputGroupAddon,
    InputGroupText,
    InputGroup,
    Col
  } from "reactstrap";
  
  const customHistory = createHashHistory();
  
  class Login extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          post : [],
          formData : {
            id : '',
            first_name : '',
            last_name : '',
            email : '',
            gender : '',
            password: '',
          },
          isLogedIn : true
  
        }
        this.handleForm = this.handleForm.bind(this);
        this.submitLogin = this.submitLogin.bind(this);
      }
  
      getPostAPI = () =&gt; {
        axios.get('http://localhost:8001/datauser')
        .then((res) =&gt; {
            this.setState ({
                post : res.data
            })
        })
      }
  
      getPostAPI2 = () =&gt; {
        axios.get('http://localhost:8001/dataadmin')
        .then((res) =&gt; {
            this.setState ({
                post : res.data
            })
        })
      }
  
      handleForm = (e) =&gt; {
        let formDataNew = {...this.state.formData};
        formDataNew[e.target.name] = e.target.value;
        this.setState({
          formData : formDataNew
        })
  
      }
  
      loadValues = () =&gt; {
        this.setState({
          formData: [`{"email": "${this.state.formData.email}","password": "${this.state.formData.password}"}`],
        }, () =&gt; {
          sessionStorage.setItem('formData', this.state.formData)
        })
      }
  
      submitLogin = (event) =&gt; {
        const { dispatch } = this.props;
        const {post} = this.state;    
        if(post.find(e =&gt;  `${e.email}${e.password}` === `${this.state.formData.email}${this.state.formData.password}` )) {
          dispatch(userLogin(this.state.formData.email, this.state.formData.password));
          this.loadValues();
                customHistory.push('/admin/index');
        }else  {
          alert("Email atau Password Salah!");
          this.setState ({
            formData : {
              email : '',
              password: ''
            },
  
  
          })
  
        }
      }
  
      componentDidMount () {
        this.getPostAPI2();
      }
  
      render() {
          return (
              &lt;Fragment&gt;
                &lt;Col lg="5" md="7"&gt;
                  &lt;Card className="bg-secondary shadow border-0"&gt;
                    &lt;CardBody className="px-lg-5 py-lg-5"&gt;
                    &lt;div className="text-center text-muted mb-4"&gt;
                        &lt;h2&gt;Form Login&lt;/h2&gt;
                    &lt;/div&gt;
                      &lt;Form role="form"&gt;
                        &lt;FormGroup className="mb-3"&gt;
                          &lt;InputGroup className="input-group-alternative"&gt;
                            &lt;InputGroupAddon addonType="prepend"&gt;
                              &lt;InputGroupText&gt;
                                &lt;i className="ni ni-email-83" /&gt;
                              &lt;/InputGroupText&gt;
                            &lt;/InputGroupAddon&gt;
                            &lt;Input onChange={this.handleForm} value={this.state.formData.email} name = "email" placeholder="Email" type="email" /&gt;
                          &lt;/InputGroup&gt;
                        &lt;/FormGroup&gt;
                        &lt;FormGroup&gt;
                          &lt;InputGroup className="input-group-alternative"&gt;
                            &lt;InputGroupAddon addonType="prepend"&gt;
                              &lt;InputGroupText&gt;
                                &lt;i className="ni ni-lock-circle-open" /&gt;
                              &lt;/InputGroupText&gt;
                            &lt;/InputGroupAddon&gt;
                            &lt;Input onChange={this.handleForm} value={this.state.formData.password} name = "password" placeholder="Password" type="password" /&gt;
                          &lt;/InputGroup&gt;
                        &lt;/FormGroup&gt;
                        &lt;div className="custom-control custom-control-alternative custom-checkbox"&gt;
                          &lt;input
                            className="custom-control-input"
                            id=" customCheckLogin"
                            type="checkbox"
                          /&gt;
                          &lt;label
                            className="custom-control-label"
                            htmlFor=" customCheckLogin"
                          &gt;
                            &lt;span className="text-muted"&gt;Remember me&lt;/span&gt;
                          &lt;/label&gt;
                        &lt;/div&gt;
  
                        &lt;div className="text-center"&gt;
                          &lt;Button onClick={this.submitLogin} className="my-4" color="primary" type="button"&gt;
                          Log in
                        &lt;/Button&gt;
                        &lt;/div&gt;
                      &lt;/Form&gt;
                    &lt;/CardBody&gt;
                  &lt;/Card&gt;
                &lt;/Col&gt;
  
              &lt;/Fragment&gt;
            );
          }
        }
  
        function select(state) {
          return {
            users: state.users
          }
        }
  
        export default connect(select)(Login);
  
  </code></pre>
  
  <p>reducers users.js</p>
  
  <pre><code>
  
  import { USER_LOGIN, USER_LOGOUT} from '../../constants/ActionTypes';
  
  
  const initialState = {
      isLoggedIn: false
    }
  
  
  export default function users(state = initialState, action) {
    switch (action.type) {
      case USER_LOGIN:
          return Object.assign({}, state, response(state, action));
      case USER_LOGOUT:
          return Object.assign({}, state, logout());
  
      default:
        return state
    }
  
  function response(state){
  
    state.isLoggedIn = true;
    return state
  
  }
  
  function logout(){
      state.isLoggedIn = false;
      return state;
      }
  }
  
  </code></pre>
  
  <p>actiontype.js</p>
  
  <pre><code>export const USER_LOGIN = 'USER_LOGIN'
  export const USER_LOGOUT = 'USER_LOGOUT'
  </code></pre>
  
  <p>actions.js</p>
  
  <pre><code>import { USER_LOGIN, USER_LOGOUT} from '../constants/ActionTypes'
  
  export function userLogin(email, password) {
      return {
          type: USER_LOGIN,
          email: email,
          password: password,
      };
  }
  
  export function userLogout() {
      return {
          type: USER_LOGOUT
      };
  }
  </code></pre>
  
  <p>im be pleasure if i to know how should i do, </p>