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!

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

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

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

Tommy Gebru
Tommy Gebru
30,164 Points

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

2 Answers

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


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;

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