Check type of React component

This is what you should do:

import MyComponent from './MyComponent';

this.props.children.forEach(child => {
    if (child.type === MyComponent) {
        console.log('This child is <MyComponent />');
    }
});

As pointed out by Konstantin Smolyanin, the accepted answer might not play nicely with react-hot-loader.

A safer alternative, suggested here:

import MyComponent from './MyComponent';
const myComponentType = (<MyComponent />).type;

this.props.children.forEach(child => {
    if (child.type === myComponentType ) {
        console.log('This child is <MyComponent />');
    }
});

Other solution:

import MyComponent from './MyComponent';
// const myComponentType = (<MyComponent />).type;
// It's the same than
const myComponentType = React.createElement(MyComponent).type;

this.props.children.forEach(child => {
    if (child.type === myComponentType) {
        console.log('This child is <MyComponent />');
    }
});

My current solution is

import MyComponent from 'MyComponent';

...


React.Children.forEach(this.props.children, child => {
    if (child.type.name === MyComponent.name) {
        console.log('Suitable component!');
    }
});

but I see that type property of React element is not documented (or I'm bad in reading documentation?). So I'm looking for more reliable solution.

Update:

Actually code if (child.type.name === MyComponent.name) should be simplified as if (child.type === MyComponent). But that didn't work for me. I've found that it was caused by react-hot-loader. Disabling it has repaired my app.

Relevant issue on react-hot-loader GitHub: https://github.com/gaearon/react-hot-loader/issues/304

Check type of React component

Related

Recent Posts