React Props Lab


In this lab, you'll define components with default props and you'll also override default props with your own prop values.

Star Wars

Millennium Falcon

Let's say we're a spaceship captain going to a local Star Wars meetup. Since we want to showcase the awesome ships people are commandeering, we need to represent them somehow. That's where you come in! You'll be creating a React component that shows us some info on a given spaceship.

  1. In the components/Spaceship.js file, create a Spaceship React component
  2. This component has several props:
    1. name (string)
    2. speed (number, defaults to slow)
    3. hasRockets (boolean, defaults to false)
    4. colors (array of strings, defaults to ['black', 'red'])

Feel free to render out the data in any form you wish!

Note: you'll need to export the Spaceship component, like this:

export default class Spaceship extends React.Component { ... };
// OR declare your component first, and then:
export default Spaceship;


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