How do you change a boolean value in App.js if a user clicks login button in a different page (login page)?

I want to change the user value to true when a user clicks a login button in my login page. I’m a beginner level web dev student and I am having hard times to solve this.

App.js

function App() {
  const user = false;

  return (
    <Router>
      <TopBar />
      <Switch>
        <Route exact path='/'>
          <Home />
        </Route>
        <Route path='/register'>{user ? <Home /> : <Register />}</Route>
        <Route path='/login'>{user ? <Home /> : <Login />}</Route>
        <Route path='/write'>{user ? <Write /> : <Register />}</Route>
        <Route path='/settings'>{user ? <Settings /> : <Register />}</Route>
        <Route path='/post'>
          <Single />
        </Route>
      </Switch>
    </Router>
  );
}

Login.jsx

export default function Login() {
  return (
    <div className='login'>
      <span className="LoginTitle">Login</span>
      <form className="loginForm">
        <label>Email</label>
        <input type="text" className='loginInput' placeholder='Enter your email...' />
        <label>Password</label>
        <input type="password" className='loginInput' placeholder='Enter your password...' />
        <button className="loginButton">Login</button>
      </form>
      <button className="loginRegisterButton">
        <Link className='link' to='/register'>Register</Link>
      </button>
    </div>
  );
}

Thanks so much for helping!

Answer

communication between components is a very basic concept in React.

You can use multiple solutions from the simplest being using local state of the component and passing a method that will update your state in the child component like the example below.

Otherwise, you could use a the global state library. Some of the most popular are react context or redux for operations like that where the main concept is putting your data in a global state from where any component in your component tree can communicate with that data.

function App() {
  const [user, setUser] = useState(false);

  const setUserToTrue = () => setUser(true);
 
  return (
    <Router>
      <TopBar />
      <Switch>
        <Route exact path='/'>
          <Home />
        </Route>
        <Route path='/register'>{user ? <Home /> : <Register />}</Route>
        <Route path='/login'>{user ? <Home /> : <Login onLoginButtonClick={setUserToTrue} />}</Route>
        <Route path='/write'>{user ? <Write /> : <Register />}</Route>
        <Route path='/settings'>{user ? <Settings /> : <Register />}</Route>
        <Route path='/post'>
          <Single />
        </Route>
      </Switch>
    </Router>
  );
}

export default function Login({onLoginButtonClick}) {
  return (
    <div className='login'>
      <span className="LoginTitle">Login</span>
      <form className="loginForm">
        <label>Email</label>
        <input type="text" className='loginInput' placeholder='Enter your email...' />
        <label>Password</label>
        <input type="password" className='loginInput' placeholder='Enter your password...' />
        <button className="loginButton" onClick={onLoginButtonClick}>Login</button>
      </form>
      <button className="loginRegisterButton">
        <Link className='link' to='/register'>Register</Link>
      </button>
    </div>
  );
}