React PropTypes: range of numbers

Question

Is there a better way to validate if a number is inside a range?

Avoiding to write

PropTypes.oneOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10) 

Agiotage

Answer 1

According to the documentation, you can define your customProps

customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  }

So for your case you can try the following

function withinTen(props, propName, componentName) {
  componentName = comopnentName || 'ANONYMOUS';

  if (props[propName]) {
    let value = props[propName];
    if (typeof value === 'number') {
        return (value >= 1 && value <= 10) ? null : new Error(propName + ' in ' + componentName + " is not within 1 to 10");
    }
  }

  // assume all ok
  return null;
}


something.propTypes = {
  number: withinTen,
  content: React.PropTypes.node.isRequired
}

Citral

You could also provide a currified function that would take a range as parameters so that you avoid hardcoded parameters in the function definition. – Photosensitive

Answer 2

If it's a sequence, You can use a smart ES6. :)

[BTW, I believe the first answer is the most appreciate, this one is just trick]

PropTypes.oneOf([...(new Array(10))].map((_, i) => i + 1))

---

**Explanation:** This `[...(new Array(10))].map((_, i) => i + 1)` part will give to the sequence.

// Sequence
console.log([...(new Array(5))].map((_, i) => i + 1))

// Spreading the Sequence numbers 
console.log(...[...(new Array(5))].map((_, i) => i + 1))

Gamogenesis

Answer 3

You can use custom Prop validator.

completed: function(props, propName, componentName) {
    if (props[propName]>=1 &&  props[propName]<=10) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  }

Please refer the documentation for further details.

https://reactjs.org/docs/typechecking-with-proptypes.html

Morlee

Answer 4

You could use airbnb's extension to proptypes which support the range PropType

range: provide a min, and a max, and the prop must be an integer in the range [min, max) foo: range(-1, 2)

Bushelman

Answer 5

Suppose you want pass and validate age between age <= 18 && age >= 60.

The below code will pass the value between the range other it won't return anything. I hope this this will help you and newcomers a lot.

In your functional component App,

import React from 'react'
import PropTypes from 'prop-types'

const App= (props) => {
  return (
    <div>
      <h1>I am in the App Component!</h1>
      <p>Age : {props.age >= 18 && props.age <= 60 ? props.age : false}</p>
    </div>
  )
}
App.propTypes = {
 age : PropTypes.number
}

export default App;

Deina