React ๐ŸŽ„

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.

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.
โ† Previous
Next โ†’

Learn other React stuff...