How to specify proptypes to allow nullable, required prop value?

Erik Hermansen

For my project, it's desirable to pass the null value in component props to indicate an unspecified value (a "known unknown", if you will). It's our team's convention to use null this way.

Via component propTypes definitions, I would like to require a value be passed for a prop, yet allow it to be null (not undefined) without React prop type validation firing a warning.

So to restate that in an i/o style:

  • prop value = string/number/object/etc --> no warning
  • prop value = null --> no warning
  • prop value = undefined (either explicitly or just omitting a prop value assignment) --> warning

How can this behavior be accomplished?

One idea is to write some alternative to .isRequired, like .isDefined that won't fire a warning for a null value, but I don't see how to do this without forking or abandoning the prop-types library.

Alex Guerra

I'm not sure if you could get it working in a chainable way (I've thought about it for maybe two minutes), but maybe you could use a custom validator?

function allowNull(wrappedPropTypes) {
  return (props, propName, ...rest) => {
    if (props[propName] === null) return null;
    return wrappedPropTypes(props, propName, ...rest);
  }
}

MyComponent.propTypes = {
  nullOrNumber: allowNull(PropTypes.number.isRequired)
};

Collected from the Internet

Please contact javaer1[email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to specify "nullable" return type with type hints

React PropTypes : Allow different types of PropTypes for one prop

The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router

How to specify if a field is optional or required in OpenAPI/Swagger?

How to specify a minimal required Java update in Gradle?

How to specify one of two props required in Flowjs?

How do I include window as a valid prop with PropTypes?

React PropTypes - How to make a shape optional with its fields required?

Prop is marked as required in component, but its value is `undefined`

The prop `children` is marked as required in `Button`, but its value is `undefined`

React PropTypes not showing is required

Failed prop type The prop is marked as required but its value is `undefined`

ESLint React PropTypes, 'prop' is missing in prop validation

The prop `classes` is marked as required in `FullWidthGrid`, but its value is `undefined`

moshi nullable list fails with "required value"

How to read the value of propTypes of my Button component

How do I specify required prop types in flow?

How to specify a nullable value on create function in modal in Laravel?

Pydantic: Specify value as required yet input example value

Entity Framework Core: default value when migrating nullable column to required

How to fix this issue “Warning: Failed prop type: The prop `title` is marked as required in `Tab`, but its value is `undefined`.”

Allow EFCore [Required]-Attribute to be nullable

How to pass a value to a React prop

How to inverse modify value of a prop

How to allow nullable boolean URI parameter?

How do I specify the type of a prop to refer to the type of another prop?

Making non-nullable class fields not required if they have a default value

How to get a nullable DateTime value?

The prop `checked` is marked as required in `ToggleSwitch`, but its value is `undefined`