Let's say I'm creating a component and I want the value of a prop I'm passing to be an integer which is less than 10. What I want is if the prop is either not an integer or is greater or equal to 10 for an error to occur in React.
Example of how I want this to work:
export default function Component (props){
typeof(props.number) != 'number' && // raise exception
props.number >= 10 && // raise exception
}
If you want a more declarative approach, use "prop-types" npm package
With this approach, you segregate validation logic from rendering itself.
import PropTypes from "prop-types";
export default function App() {
return (
<div className="App">
<Component number={23} />
</div>
);
}
function Component(props) {
return "Component rendered";
}
Component.propTypes = {
number: function (props, propName) {
if (typeof props[propName] !== "number" || props[propName] >= 10) {
throw new Error("Invalid prop");
}
}
};
Consider simply throwing an exception:
export default function Component (props){
if (typeof(props.number) != 'number' || props.number >= 10) {
throw new TypeError("Invalid property number. Must be numeric and < 10.")
}
// Your other code here...
}