⚛️🌲 React Holiday


We'll start from basics and get all the way to Suspense, Hooks, and advanced composition!
Each day is a 2-3 minute read with CodeSandbox and quick assignments.
Check out 2017 (below) for examples.

Day 23: ...and ACTION!

December 23, 2017

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!

chantastic

Written by chantastic.
Follow his nonsense on Twitter.