Typescript react children with type specified in function directly instead of using an interface

Question

Why does this work:

interface UserSidebarProps {
  children? : React.ReactNode
}

function UserSidebar({children}: UserSidebarProps) {
  return (
    <div>
      {children}
    </div>
  )
}

But this does not

function UserSidebar(children?: React.ReactNode) {
  return (
    <div>
      {children}
    </div>
  )
}

// Usage
<UserSidebar>hello world</UserSidebar>

When trying to use it, the second option gives an error in vscode of:

Type '{ children: Element | null; }' is not assignable to type 'IntrinsicAttributes & ReactNode'.
  Type '{ children: Element | null; }' is missing the following properties from type 'ReactPortal': key, type, props

I would have thought these two definitions are completely equivalent, how are they different and what am I doing wrong?

First of all, regardless of any Typescript, your signatures do not match. UserSidebar({children}) vs UserSidebar(children). Fix that first, then try again. — Codebling
– Codebling, Commented Sep 8, 2022 at 16:00

Pedro Vitorino · Accepted Answer · 2022-09-08 15:57:30Z

1

What happens is that when creating a component, the props definition (the parameter of your function) should be of a class where its properties represents the props of your component. Practically, this means that on the second example you should do something like:

function UserSidebar({children}: {children?: React.ReactNode}) {
  return (
    <div>
      {children}
    </div>
   )
}

Or you could use the PropsWithChildren class like this:

function UserSidebar({children}: PropsWithChildren) {
  return (
    <div>
      {children}
    </div>
   )
}

answered Sep 8, 2022 at 15:57

Pedro Vitorino

461 silver badge5 bronze badges

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

Comments

Codebling · Accepted Answer · 2022-09-09 14:55:14Z

1

The problem is not using an interface or not, the problem is that you changed the signature of the function (the arguments it accepts). If I remove the Typescript, can you see the difference?

function UserSidebar({children}) {

function UserSidebar(children) {

React passes props to components, and you have said that your component DOES NOT accept props, only a ReactNode.

Try adding the brace brackets again.

function UserSidebar({children}: {children: React.ReactNode;}) {

edited Sep 9, 2022 at 14:55

answered Sep 8, 2022 at 16:03

Codebling

11.5k3 gold badges46 silver badges72 bronze badges

2 Comments

sev Over a year ago

Your solution did not work with the error: Property 'children' does not exist on type 'ReactNode'

Codebling Over a year ago

@sev yes, my mistake, sorry! I've fixed it.

Collectives™ on Stack Overflow

Typescript react children with type specified in function directly instead of using an interface

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related