CODEWITHSUNDEEP
reactjstypescript
Magnus Bull
Magnus Bull

Reputation: 1146

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

Using React with TypeScript, there are several ways to define the type of children, like setting it to JSX.Element or React.ReactChild or extending PropsWithChildren. But doing so, is it possible to further limit which particular element that React child can be?

function ListItem() {
  return (
    <li>A list item<li>
  );
}

//--------------------

interface ListProps {
  children: React.ReactChild | React.ReactChild[]
}

function List(props: ListProps) {
  return (
    <ul>
      {props.children} // what if I only want to allow elements of type ListItem here?
    </ul>
  );
}

Given the above scenario, can List be set up in such a way that it only allows children of type ListItem? Something akin to the following (invalid) code:

interface ListProps {
  children: React.ReactChild<ListItem> | React.ReactChild<ListItem>[]
}

Upvotes: 5

Views: 4980

Answers (3)

Corporate Web Image
Corporate Web Image

Reputation: 29

Here's a barebones example that I am using for a "wizard" with multiple steps. It uses a primary component WizardSteps (plural) and a sub-component WizardStep (singular), which has a "label" property that is rendered in the main WizardSteps component. The key in making this work correctly is the Children.map(...) call, which ensures that React treats "children" as an array, and also allows Typescript and your IDE to work correctly.

const WizardSteps: FunctionComponent<WizardStepsProps> & WizardSubComponents = ({children}) => {
    const steps = Children.map(children, child => child); /* Treat as array with requisite type */

    return (
        <div className="WizardSteps">
            <header>
                <!-- Note the use of step.props.label, which is properly typecast -->
                {steps.map(step => <div className="WizardSteps__step">{step.props.label}</div>)}
            </header>
            <main>
                <!-- Here you can render the body of each WizardStep child component -->
                {steps.map(step => <div className="WizardSteps__body">{step}</div>)}
            </main>
        </div>
    );
}

const Step: FunctionComponent<WizardStepProp> = ({label, onClick}) => {
    return <span className="WizardSteps__label">
        {label}
    </span>
}

WizardSteps.Step = Step;

type WizardSubComponents = {
    Step: FunctionComponent<WizardStepProp>
}

type WizardStepsProps = {
    children: ReactElement<WizardStepProp> | Array<ReactElement<WizardStepProp>>
};

type WizardStepProp = {
    label: string
    onClick?: string
    children?: ReactNode
}

Upvotes: -1

Alex Wayne
Alex Wayne

Reputation: 187074

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

Upvotes: 6

Brad C.
Brad C.

Reputation: 612

Absolutely. You just need to use React.ReactElement for the proper generics.

interface ListItemProps {
   text: string
}

interface ListProps {
   children: React.ReactElement<ListItemProps> | React.ReactElement<ListItemProps>[];
}

Edit - I've created an example CodeSandbox for you:

https://codesandbox.io/s/hardcore-cannon-16kjo?file=/src/App.tsx

Upvotes: -4

Related Questions