Conditional Wrapping in React - An Advanced Approach

In React, there may be times when we have a generic element that needs to be rendered differently based on a specific condition. For example, we might have a component that displays a list of items, and we want to wrap each item in a link element if it has a specific URL. One way to handle this is to use an if-else statement, but this can result in messy and duplicative code.

A cleaner and more flexible solution is to use higher order components (HOCs) to handle the conditional wrapping for us. HOCs are higher-order functions that take a component and return a new component with additional functionality. In this article, we will explore how to use HOCs to create a reusable and flexible solution for conditional wrapping in React.

First, let's create an HOC called withConditionalWrapper that takes a condition and a wrapper component, and returns a new component that wraps its children in the specified wrapper component if the condition is met. Here is the code for withConditionalWrapper:

const withConditionalWrapper = (condition, Wrapper) => WrappedComponent => props =>  condition ? (    <Wrapper {...props}>      <WrappedComponent {...props} />    </Wrapper>  ) : (    <WrappedComponent {...props} />  );

To use withConditionalWrapper, we simply pass it the condition and the wrapper component we want to use, and then pass the component we want to wrap as an argument. For example, here is how we can use withConditionalWrapper to wrap our ItemList component with a link element if the url prop is present:

const ItemListWithConditionalWrapper = withConditionalWrapper(  ({ url }) => !!url,  'a')(ItemList);

Now, when we render ItemListWithConditionalWrapper, it will automatically wrap each item in a link element if the url prop is present, and it will not be wrapped if the url prop is not present.

One of the benefits of using an HOC like withConditionalWrapper is that it allows us to add additional functionality to our component without modifying its original code. This can be especially useful when working with third-party components that we do not have control over.

Another advantage of using HOCs for conditional wrapping is that they are highly reusable. We can use the same withConditionalWrapper HOC to wrap any component with any wrapper element based on any condition. This can save us a lot of time and effort when working on large and complex projects.

In conclusion, using HOCs for conditional wrapping in React can provide a clean, flexible, and reusable solution for a common problem. Whether you are working with your own components or third-party components, HOCs can help you add additional functionality without modifying the original code.

To wrap up, we've discussed the use of higher order components as an advanced approach to conditional wrapping in React. This method allows for the addition of additional functionality, such as passing props or applying custom styles, to the wrapped elements. While Chris Bongers' technique of using a generic component can be useful in certain situations, HOCs offer a more flexible and customizable solution for advanced conditional wrapping in React.