Compose means “smoosh things together.”

You can smoosh 🥛 and ☕️.

You can smoosh a 🍔 with your 😋.

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

Copy HTML

HTML is smooshable by default.

<h1>
  <em>Tilted Heading</em>
</h1>

The h1 and em are smooshed.

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

<ClapCounter>
  <h1>Clap This!</h1>
</ClapCounter>

Y U NO SMOOSH?

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 />.

Smooshing

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

class ClapCounter extends React.Component {
  render () {
    <div>
      {this.props.children}

      ...

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.