React PropTypes: Allow different types of PropTypes for one prop

Question

I have a component that receives a prop for its size. The prop can be either a string or a number ex: "LARGE" or 17.

Can I let React.PropTypes know that this can be either one or the other in the propTypes validation?

If I don't specify the type I get a warning:

prop type size is invalid; it must be a function, usually from React.PropTypes.

MyComponent.propTypes = {
    size: React.PropTypes
}

score 695 · Accepted Answer · edited Aug 10 '17 at 02:44

695

size: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

Learn more: Typechecking With PropTypes

edited Aug 10 '17 at 02:44

Beau Smith

29,103
12
82
88

answered Jan 23 '17 at 14:22

Paweł Andruszków

7,011
1
10
10

Thanks for this, I'm getting random errors when run my Jest tests setting static Proptypes in my classes: `ReferenceError: oneOfType is not defined` — any suggestions? Thanks in advance!! – Sara Inés Calderón Feb 09 '18 at 21:55
are u sure u have correctly imported `import PropTypes from 'prop-types';` ? – Paweł Andruszków Feb 12 '18 at 11:22
hey there Pawel -- yes, this is how we import them: `import PropTypes from 'prop-types';` – Sara Inés Calderón Feb 12 '18 at 16:59
1

2019 - use PropTypes.oneOf – Imdad May 09 '19 at 13:33
@Imdad: `oneOf` is not used for type checking, only to limit the actual value of the property. Thus keep on using `PropTypes.oneOfType`. – ganzpopp Jan 13 '21 at 09:18

score 31 · Answer 2 · answered Sep 17 '18 at 23:41

31

For documentation purpose, it's better to list the string values that are legal:

size: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.oneOf([ 'SMALL', 'LARGE' ]),
]),

answered Sep 17 '18 at 23:41

cleong

6,297
2
26
38

This is the way to do it when the prop should be an Enum. You can even provide an Enum to the `oneOf` method. – Joshua Pinter Jul 29 '20 at 12:49

score 13 · Answer 3 · edited Mar 09 '18 at 10:08

13

This might work for you:

height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

edited Mar 09 '18 at 10:08

jps

11,454
12
42
55

answered Mar 09 '18 at 08:58

CorrinaB

131
1
2

2

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – rollstuhlfahrer Mar 09 '18 at 10:08

score 0 · Answer 4 · answered Jul 01 '20 at 03:46

Here is pro example of using multi proptypes and single proptype.

import React, { Component } from 'react';
import { string, shape, array, oneOfType } from 'prop-types';

class MyComponent extends Component {
  /**
   * Render
   */
  render() {
    const { title, data } = this.props;

    return (
      <>
        {title}
        <br />
        {data}
      </>
    );
  }
}

/**
 * Define component props
 */
MyComponent.propTypes = {
  data: oneOfType([array, string, shape({})]),
  title: string,
};

export default MyComponent;

score -5 · Answer 5 · answered Oct 30 '17 at 22:04

-5

import React from 'react';              <--as normal
import PropTypes from 'prop-types';     <--add this as a second line

    App.propTypes = {
        monkey: PropTypes.string,           <--omit "React."
        cat: PropTypes.number.isRequired    <--omit "React."
    };

    Wrong:  React.PropTypes.string
    Right:  PropTypes.string

answered Oct 30 '17 at 22:04

Michael

27
1

16

Yes, PropTypes lives in its own package now, but that does not answer the question... – Kevin Amiranoff Oct 31 '17 at 15:10
1

Completely not relevant to the question – jalooc Feb 20 '19 at 23:57

React PropTypes: Allow different types of PropTypes for one prop

5 Answers5

Linked

Related