ReactJS Uncaught ReferenceError function is not defined - reactjs

Question

I am trying to implement a custom validation in React using ES6 syntax.
import React, { Component } from 'react';
export default class Board extends Component {
constructor(props) {
super(props);
}
static propTypes = { count: validate };
validate(props, propName, componentName){
if (props[propName]) {
let value = props[propName];
if (typeof value === 'number') {
if (value > 100) {
return new Error("Value cannot be more than 100");
}
}
else{
return new Error('Count should be a number')
}
}
};
render() {
return (
<div className="board">{this.props.count}</div>
);
}
}
When I run this code, I get an error "Uncaught ReferenceError: validate is not defined". I will appreciate if someone could help me resolve this.

Answer 1

import React, { Component } from 'react';
export default class Board extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="board">{this.props.count}</div>
);
}
}
const validate = (props, propName, componentName) => {
if (props[propName]) {
let value = props[propName];
if (typeof value === 'number') {
if (value > 100) {
return new Error("Value cannot be more than 100");
}
}
else{
return new Error('Count should be a number')
}
}
};
Board.propTypes = {
count: validate
}
or more simple...
import React, { Component } from 'react';
export default class Board extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="board">{this.props.count}</div>
);
}
}
Board.propTypes = {
count: (props, propName, componentName) => {
if (props[propName]) {
let value = props[propName];
if (typeof value === 'number') {
if (value > 100) {
return new Error("Value cannot be more than 100");
}
}
else{
return new Error('Count should be a number')
}
}
}
}

Answer 2

You can’t access instance properties from static properties, so easiest solution would be to make validate static too.
static propTypes = { count: Board.validate }
static validate(props, propName, componentName) {
// ...
}
this.validate seems to work too but I don’t like the combination of static and using this.