Clever Geek Handbook

React.PropTypes.number float with min and max

completed: React.PropTypes.number,

Can I specify the minimum and maximum number props

in the React component.

something like the following was expected:

completed: React.PropTypes.numberBetween(min, max),

I am creating an array to indicate the range

attempt:

completed: React.PropTypes.oneOf(Array.from({length: max -min+1, (v, k) => k + min})),

However, I want the props completed

to accept floats as well, and now it only accepts an integer.

How to combine the following restrictions:

  • prop

    is a number (integer, float, double, ... any number)

  • between MIN and MAX

+1


source to share


2 answers


You can use custom validation.



completed: function(props, propName, componentName) {
   if(props[propName] < MIN || props[propName] > MAX) {
      return new Error('Invalid');
   }
}
+4


source


By recording Custom Props Validator

, you can do this. try this:



num: function(props, propName, componentName) {
    if(typeof props[propName] != 'number'){
      return new Error ('Invalid type of `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.');
    }else if (props[propName] < MIN || props[propName] > MAX) {
      return new Error('Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.');
    }
},
+3


source






More articles:


All Articles