javascript - Exporting state variable from App.jsx to Login.jsx

Question

I have a "isLoggedin" variable in my App.js file. I want to change the value of this from false to true in my login.jsx component if the user logs in and then conditionally render the dashboard.

This is my App.js:

import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'; 
import './App.css';
import Login from './pages/Login/login.pages'
import Dashboard from './pages/Dashboard/dashboard.pages'
import Products from './pages/Products/products.pages'
import Register from './pages/Register/register.pages'
import NavBar from './components/navbar-top/navbar-top.component'
import Test from './components/test.component'

class App extends React.Component {
  
  constructor() {
    super();
    this.state ={
      isLoggedin: false
    }
  }


  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Switch>
            <Route path="/" component={Login} exact/>
            <Route path="/dashboard" component={Dashboard} />
            <Route path="/products" component={Products}/>
            <Route path="/register" component={Register}/>
            <Route path="/navbar" component={NavBar}/>
            <Route path="/test" component={Test}/>
          </Switch>
        </div>
      </BrowserRouter>
      
    );
  }
  
}

export default App;

and this is my Login.jsx

import React from 'react';
import './login.styles.css'
import { ReactComponent as Logo } from '../../assets/Logo.svg'
import axios from 'axios';


export default class Login extends React.Component {

  constructor(props) {
    super();
    this.state = {
      email: '',
      password: '',

    }
  }
  changeHandler = event => {
    const name = event.target.name;
    const value = event.target.value;

    this.setState({
      [name]: value
    });
  }

  submitHandler = event => {
    event.preventDefault();

    const user = {
      email: this.state.email,
      password: this.state.password
    };

    axios.post(`http://18.134.134.44:9000/api/employee/login`, user)
      .then(res => {
        if (res.status === 200) {
          this.props.isLoggedin = true;
          console.log(this.props.isLoggedin)
        } else {
          console.log(this.props.isLoggedin)
        }
      })
  }



  render() {
    return (
      <div className="register-container">
        <Logo className="logo" />
        <div className="register-line"></div>
        <form className="login-box" onSubmit={this.submitHandler}>
          <input type="email"
            name="email"
            className="input"
            placeholder="Work email"
            required
            value={this.state.email.value}
            onChange={this.changeHandler}

          />
          <input type="password"
            name="password"
            className="input"
            placeholder="Password"
            required
            value={this.state.password.value}
            onChange={this.changeHandler}
          />

          <input className="button" type="submit" value="LOGIN" />

          <p className="text"> Don't have an account? <a className="register" href="/register">Register</a> </p>
          <a className="register" href="/">Forgot Password</a>
          <p className="text"> {this.props.isLoggedin} </p>
        </form>
      </div>
    );
  }
}

how can I import "isLoggedin" from app.js to login.jsx, update it and return to App.js to conditionally render the dashboard?

Answer 1

The easiest way is to use a third part npm pacakge for state management like Mobx, Redux etc. You can also do this by using Context provided by React.