ReactJS Uncaught ReferenceError function is not defined

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.

propTypes is static and therefore shouldn't be accessing instance methods. Either make validate static too, or make propTypes an instance variable — CodingIntrigue
– CodingIntrigue, Commented Jan 12, 2016 at 8:12

Joey · Accepted Answer · 2016-01-12 08:26:00Z

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')
        }
    }
  }
}

CrocoDillon · Accepted Answer · 2016-01-12 08:24:00Z

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.

answered Jan 12, 2016 at 8:24

CrocoDillon

1265 bronze badges

Collectives™ on Stack Overflow

ReactJS Uncaught ReferenceError function is not defined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related