NavBar.js

import React, {Component, useState} from 'react';
import { Button, Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';

const NavBar = (props) => {
    //
    // constructor(props) {
    //     super(props);
    //     this.state = {isOpen: false};
    //     this.toggle = this.toggle.bind(this);
    // }

    const [isOpen,setIsOpen] = useState(false);


    // toggle() {
    //     this.setState({
    //         isOpen: !this.state.isOpen
    //     });
    // }


    const {isAuthenticated, login, logout} = props;

        return <Navbar color="light" light expand="md">
            <NavbarBrand tag={Link} to="/">Home</NavbarBrand>
            <NavbarToggler onClick={setIsOpen(!isOpen)}/>
            <Collapse isOpen={isOpen} navbar>
                <Nav className="ml-auto" navbar>
                    <NavItem>
                        <NavLink
                            href="https://twitter.com/oktadev">@oktadev</NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink href="https://github.com/oktadeveloper/okta-kotlin-react-crud-example">GitHub</NavLink>
                    </NavItem>
                    {!isAuthenticated ?
                        <NavItem>
                            <Button color="secondary" outline onClick={login}>Login</Button>
                        </NavItem> :
                        <NavItem>
                            <Button color="secondary" outline onClick={logout}>Logout</Button>
                        </NavItem>
                    }
                </Nav>
            </Collapse>
        </Navbar>;

}

export default NavBar;

AppJS

import React, { useState , useEffect } from 'react';
import './App.css';
import Api from './Api';

import CoffeeShopsList from './CoffeeShopsList';
import CoffeeShopEdit from './CoffeeShopEdit';
import Home from './Home';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import NavBar from "./NavBar";

const api = new Api();
const navbar = <NavBar/>;


const App = () => {

  const [isLoading,setIsLoading] = useState(true);
  const [coffeeShops,setCoffeeShops] = useState([]);

  useEffect(()=> {
      const getCoffeeShops =  async () => {
        const coffeeShops = await fetchCoffeeShops();
        setCoffeeShops(coffeeShops);
        setIsLoading(false);
      };
      getCoffeeShops();
  }, [])

  const fetchCoffeeShops = async () =>
  {
      const response = await fetch('/api/coffeeshops');
      const body = await response.json();
      return body._embedded.coffeeshops;
  };

    return (

        <Router>
            <Switch>
                <Route
                    path='/'
                    exact={true}
                    render={(props) => <Home {...props} api={api} navbar={navbar}/>}
                />
                <Route
                    path='/coffee-shops'
                    exact={true}
                    render={(props) => <CoffeeShopsList {...props} api={api} navbar={navbar}/>}
                />
                <Route
                    path='/coffee-shops/:id'
                    render={(props) => <CoffeeShopEdit {...props} api={api} navbar={navbar}/>}
                />
            </Switch>
        </Router>
    )


  // return (
  //
  //     <div>
  //         { !isLoading ? (
  //       <header className="App-header">
  //         <div className="App-intro">
  //
  //           <h2>Coffee Shop List</h2>
  //           {coffeeShops?.map(coffeeShop =>
  //               <div key={coffeeShop.id}>
  //                 {coffeeShop.name} - {coffeeShop.address}
  //               </div>
  //           )}
  //         </div>
  //       </header> ) :
  //             (
  //                 <p>Loading...</p>
  //             )}
  //     </div>
  //
  // );

};

export default App;