title: Exporting state variable from App.jsx to Login.jsx
body: <p>I have a &quot;isLoggedin&quot; 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.</p>
  <p>This is my App.js:</p>
  <pre><code>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 (
        &lt;BrowserRouter&gt;
          &lt;div className=&quot;App&quot;&gt;
            &lt;Switch&gt;
              &lt;Route path=&quot;/&quot; component={Login} exact/&gt;
              &lt;Route path=&quot;/dashboard&quot; component={Dashboard} /&gt;
              &lt;Route path=&quot;/products&quot; component={Products}/&gt;
              &lt;Route path=&quot;/register&quot; component={Register}/&gt;
              &lt;Route path=&quot;/navbar&quot; component={NavBar}/&gt;
              &lt;Route path=&quot;/test&quot; component={Test}/&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/BrowserRouter&gt;
        
      );
    }
    
  }
  
  export default App;
  
  </code></pre>
  <p>and this is my Login.jsx</p>
  <pre><code>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 =&gt; {
      const name = event.target.name;
      const value = event.target.value;
  
      this.setState({
        [name]: value
      });
    }
  
    submitHandler = event =&gt; {
      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 =&gt; {
          if (res.status === 200) {
            this.props.isLoggedin = true;
            console.log(this.props.isLoggedin)
          } else {
            console.log(this.props.isLoggedin)
          }
        })
    }
  
  
  
    render() {
      return (
        &lt;div className=&quot;register-container&quot;&gt;
          &lt;Logo className=&quot;logo&quot; /&gt;
          &lt;div className=&quot;register-line&quot;&gt;&lt;/div&gt;
          &lt;form className=&quot;login-box&quot; onSubmit={this.submitHandler}&gt;
            &lt;input type=&quot;email&quot;
              name=&quot;email&quot;
              className=&quot;input&quot;
              placeholder=&quot;Work email&quot;
              required
              value={this.state.email.value}
              onChange={this.changeHandler}
  
            /&gt;
            &lt;input type=&quot;password&quot;
              name=&quot;password&quot;
              className=&quot;input&quot;
              placeholder=&quot;Password&quot;
              required
              value={this.state.password.value}
              onChange={this.changeHandler}
            /&gt;
  
            &lt;input className=&quot;button&quot; type=&quot;submit&quot; value=&quot;LOGIN&quot; /&gt;
  
            &lt;p className=&quot;text&quot;&gt; Don't have an account? &lt;a className=&quot;register&quot; href=&quot;/register&quot;&gt;Register&lt;/a&gt; &lt;/p&gt;
            &lt;a className=&quot;register&quot; href=&quot;/&quot;&gt;Forgot Password&lt;/a&gt;
            &lt;p className=&quot;text&quot;&gt; {this.props.isLoggedin} &lt;/p&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>how can I import &quot;isLoggedin&quot; from app.js to login.jsx, update it and return to App.js to conditionally render the dashboard?</p>