react + typescript How to fix props type error

Question

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.

John Ruddell · Accepted Answer · 2020-06-23 19:12:55Z

1

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 :)

answered Jun 23, 2020 at 19:12

John Ruddell

25.9k7 gold badges60 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react + typescript How to fix props type error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related