React Prop Types Lab

Overview

In this lab, you'll use PropTypes declaration in a variety of scenarios.

A new job

Michael Scott

Welcome to your first day at... Dunder Mifflin! Your job is to make sure the company's products are catalogued on the website. Since we like to be modern, we'll use React to display the product information. Since our database is pretty old, we'll be sure to add PropTypes to our component so that we know we're passing in the right props.

  1. In the components/Product.js file, create a Product React component.
  2. This component has the following props:
    • name: a string — required
    • producer: a string — optional
    • hasWatermark: a boolean — optional, defaults to false
    • color: a string — required, can only be 'white', 'eggshell-white' or 'salmon'
    • weight: a number — required, ranges between 80 and 300
  3. Note: for the weight prop, we'll need custom logic. It's possible to write your own prop validator function. Make sure you reference the documentation and use your Google-Fu if you are having trouble!

Testing

Note: This lab might require you to restart the test watcher after changing your code.

Resources

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us