CODEWITHSUNDEEP
reactjstypescripttsx
Billy Bones
Billy Bones

Reputation: 2965

React TypeScript - children of HTML and React Components

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?

Upvotes: 1

Views: 559

Answers (1)

Ajeet Shah
Ajeet Shah

Reputation: 19813

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.

Upvotes: 2

Related Questions