onClick event not firing in my styled component in my react app-CodePudding

I'am trying to trigger an onCick event that i passed to my style component icon tag but for some reason the event does not get triggered when the icon is clicked. I've tried raping it in a div and passing the onClick event to the div instead but still get the same result. here is the code:

import React from "react";
import { useState } from "react";
import StyledNav, {NavbarhamButton} from "./style/Navbar.styled";


const Navbar = () => {
  const [NavOpen, setNavOpen] = useState(false);

  return (
    <StyledNav>
      <NavbarhamButton
        className="fas fa-bars"
        onclick={() => setNavOpen(!NavOpen)}
      />
     
    </StyledNav>
  );
};

export default Navbar;

Here is the styled components:

import { Link } from "react-router-dom";
import styled from "styled-components";
import { theme } from "../../theme";

const StyledNav = styled.div``;

export const NavbarhamButton = styled.i`
  position: absolute;
  top: 0;
  left: 0;
  margin: 1rem;
  font-size: 2rem;
  color: white;
  @media screen and (min-width: 600px) {
    display: none;
  }
  z-index: 2;
`;

I just started to use style components of recent so am still trying to wrap my head around it please correct me if am doing something wrong thanks.

CodePudding user response：

Try changing the prop to onClick for <NavbarhamButton />. You may also need to use a base component other than i. So you might want to try styled.button instead of styled.i.

CodePudding user response：

you probably misspelled onClick in the NavbarhamButton.