The typing of my style properties is in error

Question

In my component, I receive props of styles, like this:

export const NavBox = styled.div<{ open: boolean }>`
  display: flex;
  height: 100%;
  justify-content: flex-end;
  align-items: center;
  @media (max-width: 768px) {
    flex-direction: column;
    position: fixed;
    width: 100%;
    justify-content: flex-start;
    background-color: var(--color);
    transition: all 0.3s ease-in;
    top: 10.3vh;
    padding-top: 10vh;
    left: ${(props) => (props.open ? '-100%' : '0')};
  }
`

And in Header, I receive this error about types:

Property 'navbarOpen' does not exist on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; },

Property 'open' is missing in type '{ children: Element; }' but required in type 'Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes> & { ...; } & { ...; }, never> & Partial<...>, "theme">'.

This is the code:

const Header = () => {
  const [navbarOpen, setNavbarOpen] = React.useState<boolean>(false)
  return (
    <S.HeaderWrapper>
      <S.NavWrapper>
        <S.Toggle
          navbarOpen={navbarOpen}
          onClick={() => setNavbarOpen(!navbarOpen)}
        >
          {navbarOpen ? <S.Hamburger open /> : <S.Hamburger />}
        </S.Toggle>
        {navbarOpen ? (
          <S.NavBox>
            <NavBar />
          </S.NavBox>
        ) : (
          <S.NavBox open>
            <NavBar />
          </S.NavBox>
        )}
      </S.NavWrapper>
    </S.HeaderWrapper>
  )
}

Anyone can help me with this problem? Thanks for any help!

Answer 1

You defined type for "NavBox" with required property with name "open", but not passed it. You need make it non-required or pass it always.

I don't see types for "Toggle" and "Hamburger". But they is highlighted. Check their. Check property names in type and need their property always or sometimes.

If you need property always:

interface Some {
  isOpen: boolean;
}

If you need property sometimes:

interface Some {
  isOpen?: boolean;
}

Below, i highlight problem places

const Header = () => {
  const [navbarOpen, setNavbarOpen] = React.useState<boolean>(false)
  return (
    <S.HeaderWrapper>
      <S.NavWrapper>
        <S.Toggle
          navbarOpen={navbarOpen} // Check navbarOpen property in "Toggle" type
          onClick={() => setNavbarOpen(!navbarOpen)}
        >
          {navbarOpen ? <S.Hamburger open /> : <S.Hamburger />} // Check required or non-required "open" property in "Hamburger" component
        </S.Toggle>
        {navbarOpen ? (
          <S.NavBox> // You set "open" as required property, you need pass "open" property.
            <NavBar />
          </S.NavBox>
        ) : (
          <S.NavBox open>
            <NavBar />
          </S.NavBox>
        )}
      </S.NavWrapper>
    </S.HeaderWrapper>
  )
}

I made a little refactoring. In example below. "Open" property is required, pass it always. And renamed prop for "Toggle" component.

const Header: React.FC = () => {
  const [navbarOpen, setNavbarOpen] = useState<boolean>(false)
  
  const handleClick = useCallback(() => {
    setNavbarOpen(!navbarOpen)
  }, [navbarOpen])

  return (
    <S.HeaderWrapper>
      <S.NavWrapper>
        <S.Toggle open={navbarOpen} onClick={handleClick}>
          <S.Hamburger open={navbarOpen} />
        </S.Toggle>
        <S.NavBox open={navbarOpen} >
          <NavBar />
        </S.NavBox>
      </S.NavWrapper>
    </S.HeaderWrapper>
  )
}