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 · Accepted Answer · 2015-09-29 22:42:42Z

11

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

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

answered Sep 29, 2015 at 22:42

Charly.Org

1,08210 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1177440 Over a year ago

I feel like a schmuck. Thanks !

Bilbo Baggins · Accepted Answer · 2017-11-10 07:44:47Z

4

I faced similar problem with React.PropTypes, as I am using React-16 I found out that React.PropTypes is not supported. So you need to install "prop-types": "^15.6.0" using

npm install prop-types --save

and then import it as shown below

import PropType from 'prop-types'

I made a mistake while importing, instead of prop-types I imported prop-type and that was the issue for me.

Posting as an answer so others can get idea about newer package and how to install etc.

answered Nov 10, 2017 at 7:44

Bilbo Baggins

3,03911 gold badges58 silver badges81 bronze badges

1 Comment

karfkars Over a year ago

Thanks for this answer. It fix the problem for me! There is just a type which should be fixed! import PropType from 'prop-types' --> import PropTypes from 'prop-types'. Also I use -g parameter for npm install --> npm install -g prop-types --save

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related