We have seen what are the best ways to create components 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 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:
constructor(props) {
super(props)
this.state = {
posts: [],
}
}
componentDidMount() {
Posts.fetch().then(posts => {
this.setState({ posts })
...