React Design Patterns and Best Practices - Second Edition

Common parent

Now, the Counter looks a bit better, and the Buttons are reusable. The last thing to be done to clean it up completely is to remove the display logic from it.

To do that, we can create a Display component that receives the value to display and shows it on the screen:

  const Display = ({ counter }) => <h1>{counter}</h1>;     Display.propTypes = {     counter: number   };

Again, we can use a stateless functional component because there is no need to keep any state. As you may note here, splitting this component is not needed because it just renders an h1 element. However, in your application, you may add CSS classes, display logic to change the color of the counter according to its value, and so on.

In general, our goal is to make components ...