React is all about composition. It’s entirely possible to create reusable chunks of code and build apps of any scale. The versatility and power this provides in the hands of the developer is incredible. In this short example, let’s look at how we can extend a component to return another enhanced component from it.

Let’s assume the following code exists:

Although there isn’t a lot of overlap between the .actionItems in this very simplified example, you can imagine how a complex component would be. But the icons from React Icons are different. We want to build a component that takes any Icon as a prop as well as some additional props to ‘enhance’ the icons. We are essential creating a type of ‘Icon With Label’ component from an Icon and thus ‘enhancing’ the Icon.

Now the final version looks like this:

--

--