Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React PropTypes arrayOf oneOf shape A or shape B

Im trying to nest oneOf() a list of shape()'s, in arrayOf() but Im getting an error.

Warning: Failed prop type: Invalid prop tabs[0] of value [object Object] supplied to MyComponent, expected one of [null,null].

Is it possible to pass oneOf() a list of shape()'s?

tabs: React.PropTypes.arrayOf(
  React.PropTypes.oneOf([
    React.PropTypes.shape({
      id: React.PropTypes.string.isRequired,
      content: React.PropTypes.node.isRequired,
    }),
    React.PropTypes.shape({
      id: React.PropTypes.string.isRequired,
      params: React.PropTypes.object.isRequired,
    }),
  ]),
),

Update! Found an answer here, looks like I should be using OneofType instead.

tabs: React.PropTypes.arrayOf(
  React.PropTypes.oneOfType([
    React.PropTypes.shape({
      id: React.PropTypes.string.isRequired,
      content: React.PropTypes.node.isRequired,
    }),
    React.PropTypes.shape({
      id: React.PropTypes.string.isRequired,
      params: React.PropTypes.object.isRequired,
    }),
  ]),
),
like image 807
Shanimal Avatar asked Mar 30 '17 18:03

Shanimal


People also ask

What does PropTypes shape do?

PropTypes. shape is used when describing an object whose keys are known ahead of time, and may represent different types.

Should PropTypes be a dev dependency?

'prop-types' should be listed in the project's dependencies, not devDependencies.

What is the PropTypes for a React component?

What Are PropTypes In React? # PropTypes are a mechanism to ensure that components use the correct data type and pass the right data, and that components use the right type of props, and that receiving components receive the right type of props.

What is the difference between flow and PropTypes?

Flow is a static analysis tool which uses a superset of the language, allowing you to add type annotations to all of your code and catch an entire class of bugs at compile time. PropTypes is a basic type checker which has been patched onto React.


1 Answers

I decided to post my update to the question as an answer.

I found the answer here. I should be using OneofType instead.

tabs: React.PropTypes.arrayOf(
  React.PropTypes.oneOfType([
    React.PropTypes.shape({
      id: React.PropTypes.string.isRequired,
      content: React.PropTypes.node.isRequired,
    }),
    React.PropTypes.shape({
      id: React.PropTypes.string.isRequired,
      params: React.PropTypes.object.isRequired,
    }),
  ]),
),
like image 120
Shanimal Avatar answered Sep 20 '22 10:09

Shanimal