React This Props Children Lab


In this lab, you'll use this.props.children to build reusable components and use React.Children utilities.

The party planner

Organizing a party

Let's throw a party! The first thing we'll need is an invitation we can send to people with a customized message.

  1. In the components/Invitation.js file, create an Invitation React component.
  2. This component renders out an h1 with the text 'You've been invited!'
  3. After this h1, render out any children that are passed into the Invitation component. This allows us to customize the message.

A good party also has a theme and decorations that match. Let's create a component that takes its children and adds an additional prop to them. This way we can pass in the theme to our decorations by wrapping them in this component.

  1. In the components/ThemedDecorations.js file, create a ThemedDecorations React component.
  2. This component renders out all of its children, while adding a className prop to every child.


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