No overload matches this call. React

Question

I am using sidebar menu code and using const values to show and hide sidebar menu in website. But I am getting error for typesripting. Here is my code:

let Navigation = () => {
  
  const [sidebar, setSidebar] = React.useState(false);
  const showSidebar = () => setSidebar(!sidebar);
}


  return( 
    
    <nav className="navbar-default navbar-static-side main-navigation" role="navigation">
     
      <div className="sidebar-collapse">
          <IconContext.Provider value={{ color: '#fff' }}>
            <Nav>
              <NavIcon to='#'>
                  <FaIcons.FaBars onClick={showSidebar} />
              </NavIcon>
            </Nav>
            <SidebarNav sidebar= {sidebar}>
              <SidebarWrap> 
                <NavIcon to='#'>
                  <AiIcons.AiOutlineClose onClick={showSidebar} />
                </NavIcon>
                <NavIcon to='#'> 
                    <img src={logo} width="70%" /> 
                </NavIcon>
                  
              </SidebarWrap>
            </SidebarNav> 
          </IconContext.Provider>
          </div>
    </nav>
  ) 


export default Navigation

But I am getting error for,

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "slot" | "style" | "title" | "children" | ... 250 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: Element; sidebar: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
      Property 'sidebar' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"nav", any, {}, never, "nav">): ReactElement<StyledComponentPropsWithAs<"nav", any, {}, never, "nav">, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '{ children: Element; sidebar: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.
      Property 'sidebar' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.  TS2769

in line ,

 <SidebarNav sidebar= {sidebar}>

It dosn't allow me to use sidebar in tag.

Answer 1

This error comes from a type difference between what you give to Sidebar and what Sibar is expecting.

Is your Sibar component is typed like this

interface Props {
  sidebar: boolean;
}

const Sidebar:FC<Props> = ({sidebar}: Props) => {
  ...yourCode
}