CODEWITHSUNDEEP
reactjstypescriptstyled-components
aahhuhuhu
aahhuhuhu

Reputation: 493

react + typescript How to fix props type error

Development environment
・react
・typescript
・styled-components

Question
Open is passed from the parent component to the child component below.

<RightNav open={open}/>

The following error occurs at the child component ①. If there is someone who understands, please teach me

import React from 'react'
import styled from 'styled-components';

const Ul = styled.ul<{open: boolean}>`
  list-style: none;
  display: flex;
  flex-flow: row nowrap;

  li {
    padding: 18px 10px;
  }

  @media (max-width: 768px) {
    flex-flow: column nowrap;
    background-color: #0D2538;
    position: fixed;
    transform: ${({ open }) => open ? 'translateX(0)' : 'translateX()100%'};
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    padding-top: 3.5rem;

    li {
      color: #fff;
    }
  }
`
const RightNav = () => {
  return (
   // ①　Ul in error
    <Ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
      <li>Sign Up</li>
      <li>Sign In</li>
    </Ul>
  )
}

export default RightNav

　　　

  ①  [ts] Property 'open' is missing in type '{ children: Element[]; }' but required in type 'Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 247 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }, "slot" | ... 255 more ... | "open"> & Partial<...>, "sl...'. [2741]
    RightNav.tsx(4, 23): 'open' is declared here.

Upvotes: 0

Views: 814

Answers (1)

John Ruddell
John Ruddell

Reputation: 25842

You need to accept the open prop to your component, then pass it to the styled component

const RightNav = ({open}) => {
  return (
    <Ul open={open}>

if you notice... the type definition for your styled component requires the open property

const Ul = styled.ul<{open: boolean}>`
-----------------------^-------------

And the parent renders this component with the open prop

<RightNav open={open}/>
-----------^---------

So you just need to accept that prop in your component and then pass to the Ul styled component :)

Upvotes: 1

Related Questions