Why isnt my button showing up

JavaScript
1

I have a login button in my navbar component but i dont know why its not showing up when i load the screen. can someone help plz :(((

import React,{useState} from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import { makeStyles } from "@material-ui/core/styles";
import { useAuth0 } from "@auth0/auth0-react"

const loginButton = ()=>{
  const {loginWithRedirect} = useAuth0();
  const {logout} = useAuth0();
  const [checkLogin, setCheckLogin] = useState(false)
  const handleLogin=()=>{
    loginWithRedirect()
    setCheckLogin(true)
  }
  const handleLogout=()=>{
    logout()
    setCheckLogin(false)
  }

  return(
    <>
      {checkLogin===false?
        <Button onClick={handleLogin} color="inherit">Login</Button>:
        <Button onClick={handleLogout} color="inherit">Logout</Button>
      }
    </>
  )
}

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));
export default function NavBar() {
  const classes = useStyles();
  return (
    <div>
      <div>
        <AppBar
          position="static"
          style={{
            background: "#0A0F39",
            fontFamily: "Roboto",
            fontSize: "1vw",
            fontWeight: "500",
          }}
        >
          <Toolbar>
            <IconButton edge="start" color="inherit" aria-label="menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={classes.title}>
              ONEWAY
            </Typography>
            <loginButton />
          </Toolbar>
        </AppBar>
      </div>
    </div>
  );
}
2

In JSX if a tag is lowercase is treated as regular HTML; I think you just need to fix your capitalization to LoginButton and it should work.
Hope it helps.

1 Like
3

thanks man that was awesome