How can I use state across multiple components?

Question

I currently am storing user login in local storage and am rendering the appropriate nav bar depending. However, The page does not re-render upon sign-in or sign-out. I need to manually refresh the page to make it work. How can I use state in this scenario across several components?

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Navbar, Nav, Button } from "react-bootstrap";
import SignInModal from "././SignIn/SignInModal";

const NavBar = () => {
  return localStorage.getItem("auth-token") ? <SignedIn /> : <SignedOut />;
};

const SignedIn = () => {
  return (
    <Navbar className="justify-content-around main-navbar">
      <Nav.Item>
        <Link className="link" to="/">
          Signed Out
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Link className="link" to="/mainsignedin">
          Sign In
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Link className="link" to="/searchpage">
          Our Dogs
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Link className="link" to="/mypets">
          My Pets
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Button type="submit" onClick={localStorage.clear()}>
          Sign Out
        </Button>
      </Nav.Item>
    </Navbar>
  );
};

const SignedOut = () => {
  return (
    <Navbar>
      <Nav.Item>
        <SignInModal />
      </Nav.Item>
    </Navbar>
  );
};
export default NavBar;

Answer 1

Here is code.

import SignInModal from "././SignIn/SignInModal";
import {useEffect, useState} from 'react';
const NavBar = () => {
  const [isLogedIn,setIsloggedIn] =useState(false);
   useEffect(()=>{
      const auth_token = localStorage.getItem("auth-token") ;
     setIsloggedIn(auth_token ? true:false);
   },[])
   const handleSignOut=()=>{
     localStorage.clear()
     setIsloggedIn(false);
   }
  return isLogedIn ? <SignedIn onSignOut={handleSignOut} /> : <SignedOut />;
};

const SignedIn = ({onSignOut}) => {
  return (
    <Navbar className="justify-content-around main-navbar">
      <Nav.Item>
        <Link className="link" to="/">
          Signed Out
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Link className="link" to="/mainsignedin">
          Sign In
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Link className="link" to="/searchpage">
          Our Dogs
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Link className="link" to="/mypets">
          My Pets
        </Link>
      </Nav.Item>
      <Nav.Item>
        <Button type="submit" onClick={onSignOut}>
          Sign Out
        </Button>
      </Nav.Item>
    </Navbar>
  );
};

const SignedOut = () => {
  return (
    <Navbar>
      <Nav.Item>
        <SignInModal />
      </Nav.Item>
    </Navbar>
  );
};
export default NavBar;

Answer 2

You can use the useState hook to keep track of state in a React functional component.

You can use a Context to provide state to its children. Then, you can use the useContext hook within those children to access the state.

import React, { createContext, useContext } from 'react'

const MyContext = createContext({})
const MyContextProviderComponent = MyContext.Provider

const MyInnerComponent = () => {
    const myValue = useContext(MyContext)
    return <p>{myValue}</p>
}

const MyOuterComponent =() =>{
    const [myValue, setMyValue] = useState('Hello world!')
    return (
        <MyContextProviderComponent value={myValue}>
            <MyInnerComponent></MyInnerComponent>
        </MyContextProviderComponent>
    )
}