Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

At least one required prop in React

I need to make at least one of the props required:

MyComponent.propTypes = {    data: PropTypes.object,    url: PropTypes.string }; 

So in the example above, either data or url prop must be provided. The use case here is that the user could either provide the data or the url. If the url is provided, then the component will fetch the data.

Bonus question: How do I do at least one prop vs only one of the props?

like image 322
Kousha Avatar asked Feb 16 '17 20:02

Kousha


People also ask

How many props can a React component have?

I follow this rule of thumb: Three props is fine. Five props is a code smell. More than seven props is a disaster.

What is prop used for in React?

What are props in React? We use props in React to pass data from one component to another (from a parent component to a child component(s)). Props is just a shorter way of saying properties. They are useful when you want the flow of data in your app to be dynamic.

What is default prop in React?

The defaultProps is a React component property that allows you to set default values for the props argument. If the prop property is passed, it will be changed. The defaultProps can be defined as a property on the component class itself, to set the default props for the class.


2 Answers

PropTypes actually can take a custom function as an argument so you could do something like this:

MyComponent.propTypes = {   data: (props, propName, componentName) => {     if (!props.data && !props.url) {       return new Error(`One of props 'data' or 'url' was not specified in '${componentName}'.`);     }   },    url: (props, propName, componentName) => {     if (!props.data && !props.url) {       return new Error(`One of props 'url' or 'data' was not specified in '${componentName}'.`);     }   } } 

which allows for customer Error messaging. You can only return null or an Error when using this method

You can find more info on that here

https://facebook.github.io/react/docs/typechecking-with-proptypes.html#react.proptypes

from the react docs:

// You can also specify a custom validator. It should return an Error   // object if the validation fails. Don't `console.warn` or throw, as this   // won't work inside `oneOfType`.   customProp: function(props, propName, componentName) {     if (!/matchme/.test(props[propName])) {       return new Error(         'Invalid prop `' + propName + '` supplied to' +         ' `' + componentName + '`. Validation failed.'       );     }   }, 
like image 128
finalfreq Avatar answered Sep 20 '22 15:09

finalfreq


A more concise version of @finalfreq's solution:

const requiredPropsCheck = (props, propName, componentName) => {   if (!props.data && !props.url) {     return new Error(`One of 'data' or 'url' is required by '${componentName}' component.`)   } }  Markdown.propTypes = {   data: requiredPropsCheck,   url: requiredPropsCheck, } 
like image 23
Beau Smith Avatar answered Sep 23 '22 15:09

Beau Smith