React TypeScript - children of HTML and React Components

Question

I have a PopoverMenu component in which I would like to access and use the children prop. I have seen numerous posts similar to this but not similar enough to help my case.

children could be standard HTML or other React components.

Here is the PopoverMenu component:

export const PopoverMenu = (children) =>
{
    const [visible, setVisible] = useState(true);

    if (visible) {
        return (
            <ul ref={ node } className="popover-menu">
                { children }
            </ul>
        )
    }
}

...and here is the component in use...

<PopoverMenu>
    <PopoverMenuItem>
      Edit
    </PopoverMenuItem>
    <PopoverMenuItem>
      Delete
    </PopoverMenuItem>
</PopoverMenu>

...or alternatively...

<PopoverMenu>
    <li>
      <a>Edit</a>
    </li>
    <li>
      <a>Delete</a>
    </li>
</PopoverMenu>

I have tried a variety of types for children but my IDE seems to complain about all of them. These include:

ReactNode

HTMLElement

ReactChildren

What type(s) would give me the desired result and why?

Ajeet Shah · Accepted Answer · 2021-04-07 23:43:54Z

2

The type of Children should be ReactNode.

But you need to correct the props destructuring : it should be ({ children }).

Also, you need to return something from the else block. If you want to show nothing, you can return null.

edited Apr 7, 2021 at 23:43

answered Apr 7, 2021 at 23:38

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

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

2 Comments

Billy Bones Over a year ago

so after updating my code to this ({children}: {children: ReactNode}) when I attempt to use the component I get this from my IDE 'PopoverMenu' cannot be used as a JSX component. Its return type 'Element | undefined' is not a valid JSX element.

Ajeet Shah Over a year ago

github.com/typescript-cheatsheets/react seems to be a good collection of React Typings.

Collectives™ on Stack Overflow

React TypeScript - children of HTML and React Components

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related