force parent component to only accept certain child components

Question

I'm building a component that requires its direct descendants to be at least one of two types of components (ValidChildA or ValidChildB).

Using the most upvoted comment on this answer, I came up with this solution:

const ValidChildA = () => <div></div>;
const ValidChildB = () => <div></div>;

const Parent: React.FC<ParentProps> = ({ children, ...passedProps }) => {
    React.Children.forEach(children, child => {
        const isValidChildA = child.type.prototype instanceof ValidChildA;
        const isValidChildB = child.type.prototype instanceof ValidChildB;

        console.log(isValidChildA, isValidChildB); // Outputs false every time.
        if(!isValidChildA && !isValidChildB){
            console.error("Parent component expects only ValidChildA or ValidChildB as direct children.");
        }
    });

    return <div {...passedProps} />
};

export default function Page(){
    return (
        <Parent>
            <ValidChildA />
            <ValidChildB />
        </Parent>
    );
};

Now despite the children being valid, my error is still thrown and thus the component doesn't render correctly.

I could use the displayName property to check if a child is a valid component, but since Next uglifies the code and the displayName property in production, this would break the app.

Answer 1

After a bunch of digging and reading (list included below), it seems like you could use named functions and then you could check the function name to see if it matched. I'm not sure if this will satisfy your requirements, but I did just try the following:

Define your ValidChild* components with function instead of the fat-arrow syntax () => .

function ValidChildA() {
   return <div>A</div>
}

function ValidChildB() { 
   return <div>B</div>
}

Then in your checks inside the children loop, you can look at the function name and make sure it's valid.

React.Children.forEach(children, (child) => {
   const isValidChildA = child.type?.name === ValidChildA.name;
   const isValidChildB = child.type?.name === ValidChildB.name;
   ...

With this code, this component does not log the error

<Parent>
  <ValidChildA />
  <ValidChildB />
</Parent>

But this one does

<Parent>
  <div>a</div>
  <ValidChildA />
  <ValidChildB />
</Parent>

The short answer ends here but I below I added some other thoughts and research that I did to get me here.

The reason what you're trying doesn't work (I think) is because functional components don't have a prototype - they are not classes - they are functions. So if you look at child.type.prototype, you'll find it's undefined which of course will never be an instanceof anything.

I did a bunch of experimenting and found that even if you moved to class based components, these checks don't work. Seems kind of strange but...

class ValidChildB extends React.Component {
  render() {
     return <div>Bprime</div>
    }
}

If we render this and add some logs...

React.Children.forEach(children, child => {
  console.log(`Prototype ${child.type.prototype}`);
  console.log(`instanceof object? ${child.type.prototype instanceof Object}`)
  console.log(`instanceof Component? ${child.type.prototype instanceof React.Component}`)
  console.log(`instanceof ValidChildB? ${child.type.prototype instanceof ValidChildB}`)
 
  ...
})

we get

// for ValidChildA - functional component
"Prototype undefined"
"instanceof object? false"
"instanceof Component? false"
"instanceof ValidChildB? false"

// for ValidChildB - class component
"Prototype [object Object]"
"instanceof object? true"
"instanceof Component? true"
"instanceof ValidChildB? false"

I did a bunch of reading and a Typescript guard solution (telling typescript to enforce that the children are ValidChildA | ValidChildB is tricky or not doable. Also, as you pointed out, doesn't solve your issue because you need it to happen at runtime. But still found it an interesting little research project. Check out the posts if you want more on that direction.

• SO: How do I Restrict Type of React Children

• SO: Typescript and React Children