Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (retired) Thinking in Components PropTypes and DefaultProps

Posted by Cecile Bertin
Cecile Bertin
6,908 Points

React.PropTypes is deprecated as of React v15.5, This video (+ links, and the related quizz question) should be updated.

See: https://facebook.github.io/react/docs/typechecking-with-proptypes.html

and

https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes

Daniel Jeffery
Daniel Jeffery
Courses Plus Student 1,720 Points

I don't think Treehouse is great at updating videos when things change in frameworks :P

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Perhaps this should be in the Teachers Notes... :star:

2 Answers

Adam Fields
.a{fill-rule:evenodd;}techdegree seal-36
Adam Fields
Full Stack JavaScript Techdegree Graduate 37,838 Points

PropTypes are still a thing, they are just not a part of the core React library anymore (sort of like React breaking out ReactDOM into its own library).

You just need to install it manually:

npm install --save prop-types

or

yarn add prop-types

Then import it and call PropTypes directly instead of React.PropTypes:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Application extends Component {
  ...
}

Application.propTypes = {
  title: PropTypes.string.isRequired
};

export default Application;
Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points
Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

This is what I did in order to get the type errors to work correctly as indicated in the video. Use React.development & React-dom.development version instead of production. Also include prop-types.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.js"></script>
<script type="text/babel" src="./app.jsx"></script>

Application.propTypes = {
    title: PropTypes.string.isRequired,
};

// Warning: Failed prop type: The prop `title` is marked as required in `Application`, but its value is `undefined`.
//    in Application

ReactDOM.render(<Application type={7} />, document.getElementById('container'));