import propTypes vs import PropTypes

Question

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?

Answer 1 · 2021-12-25T11:07:24Z

December 25, 2021 11:07am

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.

Answer 2 · 2022-02-16T12:44:50Z

February 16, 2022 12:44pm

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.

Welcome to the Treehouse Community

Looking to learn something new?

Chris Adams

Chris Adams

import propTypes vs import PropTypes

2 Answers

Tomas Schaffer

Tomas Schaffer

Joe Elliot

Joe Elliot