Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to best define a propType for accepting a component as a prop?

See original GitHub issue

Given this contrived example, what is the best definition of componentType?

const componentType = PropTypes.oneOfType([
    PropTypes.shape({render: PropTypes.func.isRequired}), // React.createClass / React.Component ...better way to describe?
    PropTypes.func,                                       // Stateless function
    // others?
]);

const Selector = React.createClass({

    propTypes: {
        components: PropTypes.arrayOf(componentType).isRequired,
        index:      PropTypes.number.isRequired,
    },

    render() {
        const Component = this.props.components[this.props.index];
        return (
            <Component />
        );
    }
});

Issue Analytics

State:
Created 8 years ago
Reactions:5
Comments:20 (4 by maintainers)

Top GitHub Comments

161reactions

tiborsaas-twcommented, Jul 9, 2019

You can now use PropTypes.elementType to validate for Component type props:

https://github.com/facebook/prop-types/pull/211

46reactions

probablyupcommented, Oct 12, 2015

@jimbolla React.PropTypes.node I believe is the closest one, it means anything renderable.

Top Results From Across the Web

Typechecking With PropTypes - React

To run typechecking on the props for a component, you can assign the special propTypes property: import PropTypes from 'prop-types'; class Greeting extends ......

reactjs - propType for accepting a component as a prop?

I crossposted to github and got this answer. So it should be: const componentType = PropTypes.oneOfType([PropTypes.string, PropTypes.func]).

Mastering Props And PropTypes In React - Smashing Magazine

This tutorial will introduce you to the details about props, passing and accessing props, and passing information to any component using props.

How to validate React props using PropTypes - LogRocket Blog

Learn how to validate props with React PropTypes, React's internal mechanism for adding type checking to component props.

How to Use PropTypes in React - freeCodeCamp

If you want to just check to see if a prop is a React component, you can use PropTypes.element. This is useful for...