ReactJs - Uncaught TypeError: Cannot read property 'string' of undefined

Question

My 2 files:

APP:

import React, { Component } from 'react';
import { NICE, SUPER_NICE } from './colors';
import Counter from './counter';

export class App extends Component {
  render() {
    return (
      <div>
        <Counter increment={ 1 } color={ NICE } />
        <Counter increment={ 5 } color={ SUPER_NICE } />
      </div>
    );
  }
}

Counter:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    this.interval = setInterval(() => this.tick(), 1000);
  }

  tick() {
    this.setState({
      counter: this.state.counter + this.props.increment
    });
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <h1 style={ { color: this.props.color } }>
        Counter ( { this.props.increment } ): { this.state.counter }
      </h1>
    );
  }
}

Counter.defaultProps = {
  increment: 0,
  color: null
};

Counter.propTypes = {
  increment: React.PropTypes.number.isRequired,
  color: React.propTypes.string.isRequired
};


module.exports = Counter;

I am using:

"react": "^0.14.0-rc1",
"eslint": "^1.3.1",
"eslint-config-airbnb": "^0.1.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^3.0.0"

I need the declare the propTypes to satisfy eslint, but I am receiving a run-error:

"Uncaught TypeError: Cannot read property 'string' of undefined".

Does anyone see my error?

Many Thanks !

Charly.Org Charly.Org · Accepted Answer · 2015-09-29T22:42:42

On the counter propTypes, the "color" React.PropTypes should be capitalized.

Counter.propTypes = {
  increment: React.PropTypes.number.isRequired,
  color: React.PropTypes.string.isRequired
};

ReactJs - Uncaught TypeError: Cannot read property 'string' of undefined

2 Answers