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 trialChris Adams
Front End Web Development Techdegree Graduate 29,423 Pointsimport 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
11,606 PointsPropTypes 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
5,330 PointsI 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.