IdPager knows too much. It knows how to manage an id and display buttons.

Pager Duty

Let’s pass the actions into this.props.render with the id.

I like putting them in an object. It lets me add and remove actions without impacting the number of arguments.

return this.props.render(
  this.state.id,
  {
    increment: () =>
      this.setState(({ id }) => ({ id: id + 1 })),
    decrement: () =>
      this.setState(({ id }) => ({ id: id - 1 }))
  }
);

Now—for us—those button components move up to our root ReactDOM.render().

Design at will

Now that IdPager exposes actions, the implementation is up to the developer using it. Instead of the default buttons we used, they can get creative!

render={(id, actions) =>
  <div>
    <button
      className="fancy-button"
      type="button"
      onClick={actions.decrement}
    >Previous</button>

Tinker with it

Use the workspace below and explore actions in render props.

• Add an action. Maybe a Start over button that goes back to 1.
• Show you colors and add some style!