Gweneth got it right. Conscious Uncoupling is a good (for components).

Let’s explore a new smooshing technique that makes PokemonPager reusable.

Insert component here

You can insert components into other components via props.

Because components are functions and JavaScript functions transportable, we can pass components around.

<SomeComponent component={OtherComponent} />

The above might be implemented something like this:

const OtherComponent = () => <h2>👋</h2>

const SomeComponent = props => <props.component />

(Yes, JSX lets you do that)

Uncoupling PokemonPager

Our PokemonPager doesn’t need to be Pokemon specific. With a little work, it could render anything that takes an id prop.

Let’s uncouple it by inserting Pokemon via a component prop.

ReactDOM.render(
  <PokemonPager component={Pokemon} />,
  document.getElementById("root")
)

Now update the PokemonPager to render this.props.component where <Pokemon /> is.

<this.props.component id={this.state.id} />

Finally, rename PokemonPager to a IdPager, wherever you see it.

Smooshing is magic

We’re getting to the good stuff. Smooshing is the magic of React 🧙‍♂️

This is the first of three smooshing patterns we’ll explore this week.

Tinker with it

Use the workspace below and explore component insertion smooshing.

• Create a new component called ShowId and insert it into IdPager where Pokemon is now.
• Read the doc on defaultProps. Use your new ShowId component as the defaultProps for omponent.