React Holiday

Day 12: Smoosh components

Compose means “smoosh things together.”

You can smoosh 🥛 and ☕️.

You can smoosh a 🍔 with your 😋.

You smoosh things all day; it’s not fancy.


HTML is smooshable by default.

  <em>Tilted Heading</em>

The h1 and em are smooshed.

But if we try and smoosh things with our ClapCounter, nothing happens.

  <h1>Clap This!</h1>


Meet children

All react components get a special prop: children.

Up to this point, we’ve had no children. But the stork delivered one when we nested <h1>Clap This!</h1> in <ClapCounter />.


Now that we have children, we can render them. Let’s put them at the top.

class ClapCounter extends React.Component {
  render () {


Congrats! You learned how to smoosh.

We’ll do more advanced smooshing next week.

Tinker with it

Use the workspace below and explore smooshing.

  • What happens if you keep the {this.props.children} but remove the nested <h1>?
  • Can you smoosh another custom component in ClapCounter? Make one and find out.