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 Components (2018) React Component Patterns Static PropTypes and Default Props

import propTypes vs import PropTypes

Hey everyone! So i'm currently on the prop validation section of the React Components course, and would love it if someone could help me to better understand the syntax here.

So, Guil is introducing the propTypes package, and is using this syntax:

import PropTypes from 'prop-types';

Header.propTypes = {
  title: PropTypes.string,
  players: PropTypes.arrayOf(PropTypes.object),
};

Why is PropTypes imported with a capital letter, but Header.propTypes uses camel case? I'm following along using VSC, and the auto-complete also always attempts to import using

import propTypes from "prop-types";

What am I missing here?

2 Answers

Tomas Schaffer
Tomas Schaffer
11,606 Points

PropTypes is an Object imported from npm package 'prop-types' and Header.propTypes is property of object Header where Header is an Object - or call it component in react and you are setting this properties. You are actualy setting properties according of object PropTypes. Reason why you doing this is to make sure your Header component recieve properties with type you preset and if you overwrite for example property title with number instead of string it throws you warning or exception while pure javascript actualy does not care.

Joe Elliot
Joe Elliot
5,330 Points

I wondered this too as VSC kept correcting my code.

Stats.propTypes = {} must be written this way or the app will crash. But import propTypes from and title.propTypes.String will work with propTypes OR PropTypes, so long as they match.

I don't know why.

I checked this official React documentation and they match the syntax Guil uses.