Property 'isOpen' does not exist on type 'IntrinsicAttributes. ts(2322)

Question

I'm creating a navbar, but I'm not able to show the Wrapper menu when clicked. The error occurs when inserting isOpen = {isOpen} in <Sidebar />

ERROR

Type '{ isOpen: boolean; toggle: () => void; }' is not assignable to type 'IntrinsicAttribute. Property 'isOpen' does not exist on type 'IntrinsicAttributes. ts(2322)

---

pages/Home.tsx

import React, { useState } from 'react';
...
import Navbar from '../../components/Navbar';
import Sidebar from '../../components/Sidebar';


interface SidebarProps {
  isOpen?: boolean;
}

const Home: React.FC<SidebarProps> = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <Sidebar isOpen={isOpen} toggle={toggle} /> <----------- ERRO
      <Navbar />
      <HomePage>
       ...
      </HomePage>

---

components/Sidebar/styles.tsx

import { FaTimes } from 'react-icons/fa';
import { Link as LinkScroll } from 'react-scroll';

import styled from 'styled-components';

interface SidebarProps {
  isOpen?: boolean;
}

export const SidebarContainer = styled.aside<SidebarProps>`
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #010311;
  display: grid;
  align-items: center;
  top: 0;
  left: 0;
  transition: 0.4s ease-in-out;
  opacity: ${({ isOpen }) => (isOpen ? '100%' : '0')};
  top: ${({ isOpen }) => (isOpen ? '0' : '-100%')};
`;

Answer 1

I think in the styled component you should access the boolean isOpen in the following way:

opacity: ${props => props.isOpen ? '100%' : '0'}