Is it possible to limit children to specific components using React with TypeScript?

by

You can’t constrain react children like this.

Any react functional component is just a function that has a specific props type and returns JSX.Element. This means that if you render the component before you pass it a child, then react has no idea what generated that JSX at all, and just passes it along.

And problem is that you render the component with the <MyComponent> syntax. So after that point, it’s just a generic tree of JSX nodes.

This sounds a little like an XY problem, however. Typically if you need this, there’s a better way to design your api.

Instead, you could make and items prop on List which takes an array of objects that will get passed as props to ListItem inside the List component.

For example:

function ListItem({ children }: { children: React.ReactNode }) {
  return (
    <li>{children}</li>
  );
}

function List(props: { items: string[] }) {
  return (
    <ul>
      {props.items.map((item) => <ListItem>{item}</ListItem> )}
    </ul>
  );
}

const good = <List items={['a', 'b', 'c']} />

In this example, you’re just typing props, and List knows how to generate its own children.

Playground

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

Leave a Comment