Consider having a key and value map object like below:

export const PlaceholderVisibility = {
  Always: undefined,
  Never: null,
  OnFocus: true,
  OnBlur: false
}

How would you use PropTypes to only allow values specified in the existing object?

Here is what I tried:

import PropTypes from 'prop-types';
export const myTypes = {
  // ...
  visibility: PropTypes.oneOf(PlaceholderVisibility)
}

But I am currently using PropTypes.bool as that seems to work for this situation, but still, that would not work when for example one of the values was of type string.

Consider having a key and value map object like below:

export const PlaceholderVisibility = {
  Always: undefined,
  Never: null,
  OnFocus: true,
  OnBlur: false
}

How would you use PropTypes to only allow values specified in the existing object?

Here is what I tried:

import PropTypes from 'prop-types';
export const myTypes = {
  // ...
  visibility: PropTypes.oneOf(PlaceholderVisibility)
}

But I am currently using PropTypes.bool as that seems to work for this situation, but still, that would not work when for example one of the values was of type string.

• javascript
• reactjs
• react-proptypes

• just extract values (or keys) from object into an array – xadm Commented May 27, 2019 at 10:26
• @xadm, Would something like PropTypes.oneOf( [ ...PlaceholderVisibility ] ) do that for me? (I mean, especially for objects with more key and values, it would be troublesome to do that manually) – Top-Master Commented May 27, 2019 at 10:36
• 2 rather sth like Array.from(), object.values (or keys) ... see here – xadm Commented May 27, 2019 at 11:11

1 Answer 1

To allow only one of object values in React PropTypes - you can use PropTypes.oneOf with Object.values() like so:

import PropTypes from 'prop-types';

export const PlaceholderVisibility = {
  Always: 'always',
  Never: 'never',
  OnFocus: 'on-focus',
  OnBlur: 'on-blur'
}

export const myTypes = {
  // ...
  visibility: PropTypes.oneOf(Object.values(PlaceholderVisibility))
}

Note, the statement above is equal to just this:

export const myTypes = {
  // ...
  visibility: PropTypes.oneOf([
   'always',
   'never',
   'on-focus',
   'on-blur'
  ])
}

So, it's better to have values in your object quite a unique to avoid misusages. E.g., if someone passed directly value like 'always' string - react won't plain.