Use imported modules in React propType definitions

Question

I need Rows children to all be instances of the Col component: The following code worked when Row and Col were in the same file, but when I import Col into Row I get this error: Warning: Failed prop type: Cannot call a class as a function

How can variables and imports be used in propType definitions? (building with webpack)

import React from 'react';
import PropTypes from 'prop-types';
import Col from './Col';

export default class Row extends React.Component {
  static propTypes = {
    children: PropTypes.oneOfType([
      PropTypes.shape({ type: Col }),
      PropTypes.arrayOf(PropTypes.shape({ type: Col }))
    ]).isRequired,
......

Show your `Col`. Do you have `class Col extends React.Component` or just `class Col {...`? — Arup Rakshit, Aug 29 '18 at 21:01
>PropTypes.instanceOf() expects a regular JavaScript "class" and not a React class https://github.com/facebook/react/issues/2979 — Gerard, Aug 29 '18 at 21:28

score 0 · Answer 1 · answered Aug 29 '18 at 22:34

As the React devs themselves admit here , there is no one way to define a prop type for a component.

Perhaps the most generic possible option would be:

PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.func])

If you're not concerned with strings (for native elements like "div") you can just do:

React.PropTypes.func

And if you want to get very specific, see this answer:

React propTypes component class?

Use imported modules in React propType definitions

1 Answers1