We have seen what the best ways to create components are, and the scenarios where it makes sense to use a local state. We have also seen how we can make our components reusable defining a clear interface with the prop types.
Let's now dive into a real-world example and take a look at how we can transform a non-reusable component into a reusable one with a generic, and cleaner, interface.
Suppose we have a component that loads a collection of posts from an API endpoint, and it shows the list on the screen.
It is a simplified example, but it is useful for understanding the necessary steps we need to take to make components reusable.
The component is defined as follows:
class PostList extends React.Component
With the constructor and a life cycle method, an empty array gets assigned to posts to represent the initial state:
constructor(props) {
super...
