Only allow specific components as children in React and Typescript

by

To do that you need to extract props interface from children component (and preferably also parent) and use it this way:

interface ParentProps {
    children: ReactElement<ChildrenProps> | Array<ReactElement<ChildrenProps>>;
}

so in your case it would look like this:

interface IMenu {
  children: ReactElement<IMenuItem> | Array<ReactElement<IMenuItem>>;
}

const MenuItem: React.FunctionComponent<IMenuItem> = ({ props }) => {
  return (...)
}

const Menu: React.FunctionComponent<IMenu> = ({ props }) => {
  return (
    <nav>
      {props.children}
    </nav>
  )
}

More Related Contents:

  1. PropTypes in a TypeScript React Application
  2. How to use refs in React with Typescript
  3. Typescript input onchange event.target.value
  4. What does the error “JSX element type ‘…’ does not have any construct or call signatures” mean?
  5. Property ‘value’ does not exist on type ‘Readonly’
  6. How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
  7. Typescript image import
  8. mobx-react observer don’t fires when I set observable
  9. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  10. Set types on useState React Hook with TypeScript
  11. Cannot use JSX unless the ‘–jsx’ flag is provided
  12. Importing images in TypeScript React – “Cannot find module”
  13. Default property value in React component using TypeScript
  14. How to type a page component with props in Next.js?
  15. What does the colon mean in Javascript after function?
  16. React Hooks – Modified state not reflecting immediately
  17. React Hooks – Modified state not reflecting immediately
  18. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  19. React with Typescript — Generics while using React.forwardRef
  20. is it possible to React.useState(() => {}) in React?
  21. How do I type this ‘as’ JSX attribute in TypeScript?
  22. Typescript React: Access component property types
  23. How to define css variables in style attribute in React and TypeScript
  24. How to assign the correct typing to React.cloneElement when giving properties to children?
  25. Disable ESLint that create-react-app provides
  26. React and TypeScript—which types for an Axios response?
  27. Webpack & Typescript image import
  28. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  29. ‘React’ was used before it was defined
  30. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes

Leave a Comment