React using defaultProptypes and propTypes check, with undefined prop

Question

Without special invitation I was on React documentation here aiming to play with the idea of defaultProps. I got TypeError that I can not understand!

import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';



class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.defaultProps = {
  name: 'Stranger'
};

Greeting.propTypes = {
  name: PropTypes.string,
};

ReactDOM.render(<Greeting/>, document.getElementById('root'));

Result:

Uncaught TypeError: Cannot read property 'string' of undefined

Pointing to (in Sources):

name: _react.PropTypes.string

As you read in documentation:
The propTypes typechecking happens after defaultProps are resolved, so typechecking will also apply to the defaultProps.

If I remove:

Greeting.propTypes = {
  name: PropTypes.string, //.isRequired
};

There will be no TypeError!
Please, how I could understand this and have both propTypes and defaultProps without getting TypeError if I didn't explicitly provide a prop that has a default value assigned (which is why default value exists)?

Callam · Accepted Answer · 2017-10-09 21:21:27Z

2

The error tells you that PropTypes is undefined, meaning there is an issue with what you're importing. You should import PropTypes from prop-types:

import PropTypes from 'prop-types';

https://reactjs.org/docs/typechecking-with-proptypes.html

answered Oct 9, 2017 at 21:21

Callam

11.5k2 gold badges36 silver badges33 bronze badges

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

2 Comments

Ariam1_catalist_number_666 Over a year ago

Thanks. I imported it, but as "import React, {PropTypes} from 'react';"

Ariam1_catalist_number_666 Over a year ago

and the funny is that I was practicing by a video tutorial that was not updated, only your answer recalled me that it's updated and no more where I imported from!

Collectives™ on Stack Overflow

React using defaultProptypes and propTypes check, with undefined prop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related