Chris Bongers

Posted on Dec 11, 2022 • Updated on Dec 12, 2022 • Originally published at daily-dev-tips.com

Conditional wrapping in React

#react #webdev

This is something you do not always need, but I wrote this article for those looking for it.

Sometimes we might have a generic element, a specific component that renders inside a modal.
When a specific flag is set, the component should get a parent wrapper to display it in a different variant.

We could use an if...else statement, but it looks messy.

Conditional wrapping in React

Let's say we got specific service cards to make it a bit easier to follow. In some cases, they explain a service, but in others, they need to link to a detail page.

The component might look like this.

const ServiceCard = ({ title, description, image, url }) => {
  return (
    <section>
      <h2>{title}</h2>
      <p>{description}</p>
      <img src={image} alt={title} />
    </section>
  );
};

As mentioned, what happens if we need to wrap this whole thing in a link element when the URL exists?
We could use the if...else loop.

const ServiceCard = ({ title, description, image, url }) => {
  return (
    <section>
      {url ? (
        <a href={url}>
          <h2>{title}</h2>
          <p>{description}</p>
          <img src={image} alt={title} />
        </a>
      ) : (
        <>
          <h2>{title}</h2>
          <p>{description}</p>
          <img src={image} alt={title} />
        </>
      )}
    </section>
  );
};

But this shows duplicate code, so it's a bit silly. If we need to style each element, we must modify it in two places.

So how can we better wrap this conditionally?

We can create a generic component that handles this for us, the component will be named ConditionalWrapper, and it will take a condition, the wrapper, and the children it should wrap.

const ConditionalWrapper = ({ condition, wrapper, children }) =>
  condition ? wrapper(children) : children;

With that in place, we can use it on our existing component to clean it up.

const ServiceCard = ({title, description, image, url}) => {
    return (
        <section>
            <ConditionalWrapper
                condition={url}
                wrapper={children => <a href={url}>{children}</a>}
            >
                <>
                    <h2>{title}</h2>
                    <p>{description}</p>
                    <img src={image} alt={title} />
                </>
            </ConditionalWrapper>
        </section>
    )
}

And now, if we use our component, depending on whether we pass the URL. It will render with or without the href. And the best part is that we have no duplication in our elements.

For example, the following use case:

<ServiceCard title='test' description='foo bar' img='img1.jpg' />

It would return the following HTML output:

<section>
  <h2>test</h2>
  <p>foo bar</p>
  <img src="img1.jpg" alt="test" />
</section>

We will get the following output if we put the URL in the element.

<section>
  <a href="url">
    <h2>test</h2>
    <p>foo bar</p>
    <img src="img1.jpg" alt="test" />
  </a>
</section>

Pretty cool, right?

The main magic, of course, happens in the ConditionalWrapper component and, to be precise, the wrapper argument.

Since we pass the children (which is a React default prop), we can see that the use case of our function as in wrapper={children => <a href={url}>{children}</a>} states.

If the condition is met
Wrap the children in this specific element

There will only be a handful of times when you might need this function, but it can be a huge lifesaver.

Note: big thanks to Olivier for the original idea!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Latest comments (43)

Ioannis Potouridis • Mar 6 '23

What would happen if your ServiceCard component had a state?

wrapper={children => <a href={url}>{children}</a> would cause the children to re-render, which in your example is acceptable but people will use ConditionalWrapper in different cases. Imagine wrapping animated elements, form elements, charts, maps etc.

What happens to the code if I want to use a different wrapper component in one ServiceCard?

My answer to conditional wrapping is always polymorphic components.

This would be your new component.

function ServiceCard(props) {
  const { description, img, title, wrapperComponent: WrapperComponent = 'div', ...wrapperComponentProps } = props;

  return (
    <section>
      <WrapperComponent {...wrapperComponentProps}>
        <h2>{title}</h2>
        <p>{description}</p>
        <img alt="test" src={img} />
      </WrapperComponent>
    </section>
  )
}

Then use it as is to use a div.

<ServiceCard description="foo bar" img="img1.jpg" title="test"  />

Or an anchor element

<ServiceCard
  description="foo bar"
  href="get-me-out-of-here"
  img="img1.jpg"
  title="test"
  wrapperComponent="a" 
/>

Or even a router link

<ServiceCard
  description="foo bar"
  img="img1.jpg"
  title="test"
  to="get-me-out-of-here"
  wrapperComponent={Link} 
/>

Lucas Winkler • Mar 1 '23

This helps so much for my current project. Still got a lot of learning to do and I was trying to find a way around code duplication for a my main navigation.

ayka.code • Dec 17 '22

Hi Chris,

I really enjoyed your article on using ConditionalWrapper for conditional wrapping in React. In my recent blog post, I introduce an advanced approach using higher order components (HOCs). I found this method to be more flexible and customizable, and I think it might be useful for others looking to add additional functionality to their wrapped elements. Thank you for sharing your technique, and I hope my approach might be of interest to your readers as well.

Chris Bongers • Dec 18 '22

Thanks for that, help me understand though what's the difference between my generic component and your HOC?
It's just terminology, right?

ayka.code • Dec 18 '22

In a sense, the terms "generic component" and "HOC" are just labels that we use to describe different types of components in software development. However, there are some practical differences between these two types of components that go beyond just the terminology.

An HOC is a function that takes a component and returns a new, enhanced component. This allows you to reuse code and abstract common logic across multiple components, and can be a powerful tool for creating reusable abstractions in your code.

On the other hand, a generic component is simply any component that is not an HOC. It could be a presentational component that only handles the rendering of UI elements, or a container component that handles the data management and behavior of your application.

So while the terms "generic component" and "HOC" are just labels, they do reflect some practical differences in how these components are used and what their purpose is.

Valiant600 • Dec 15 '22

FYI

github.com/aliakakis/react-templat...

gitaakashstack • Dec 15 '22 • Edited

Why it couldn't be as simple as this below ?

let Wrapper = React.Fragment //fallback in case you dont want to wrap your components

if(someCondition) {
    Wrapper = ParentComponent
}

return (
    <Wrapper parentProps={parentProps}>
        <Child></Child>
    </Wrapper>
)

Chris Bongers • Dec 16 '22

This is kind of the extended write down of the function I described.
So if that's easier for you that will work.

Vinícius Hoyer • Dec 15 '22 • Edited

Aren't we overthinking this, doesn't this works fine? (Not react dev here)

export default comp({ isCond }) {
  const Wrapper = isCond? 'a' : React.Fragment;

  return (<Wrapper>content</Wrapper>);
}

Chris Bongers • Dec 16 '22

Not sure how my example is complicated to be honest?
Seems pretty straightforward.

Vinícius Hoyer • Dec 31 '22

My point was that it seemed like an unnecessary abstraction since the "wet" code is not really a bother to use, you understand?

Not that your code was complicated by any means

gitaakashstack • Dec 15 '22

Yes Even I am thinking the same....what's the need to complicate....even this keeps our code DRY

Chris Bongers • Dec 16 '22

The only code that really matter is this piece:

const ConditionalWrapper = ({ condition, wrapper, children }) =>
  condition ? wrapper(children) : children;

So seems pretty simple right?
The other is just examples of the use-case really.

Hope that clarifies some things 🙏

Uzoma Nwanne • Dec 15 '22

Looks like a clean implementation. I will try it out later.

Mohammad Sohrab Hossain • Dec 15 '22

Great article.

Thanks man

Yuki Kimoto - SPVM Author • Dec 15 '22

I feel this is similar with Mojo::Template.

<%= $flag ? 'Foo' : 'Bar' %>

Ismail Cherri • Dec 14 '22

I created a library that solves these kind of problems: npmjs.com/package/react-jsx-flow

Chris Bongers • Dec 15 '22

Awesome! I'll go check it out

Slo Loris • Dec 15 '22

Thats something handy 😃

Joan Roucoux • Dec 13 '22

Thanks for sharing!

Muhammad Talha Akbar • Dec 13 '22

Definitely thought-provoking. An abstraction like ConditionalWrapper component is one way of doing it in this simplified use case. But it may need serious consideration in the real setting. How about refactoring the duplicated part into a separate component e.g. ServiceCardDetails while keeping the JSX expression?

const ServiceCardDetails = ({ title, description, image }) => (
  <>
   <h2>{title}</h2>
    <p>{description}</p>
    <img src={image} alt={title} />
  </>
)

const ServiceCard = ({ title, description, image, url }) => {
  return (
    <section>
      {url ? (
        <a href={url}>
          <ServiceCardDetails title={title} description={description} image={image} />
        </a>
      ) : (
        <ServiceCardDetails title={title} description={description} image={image} />
      )}
    </section>
  );
};

Abstractions are nice but duplication is far superior if the abstraction does not withstand real challenges. Only you as an engineer can tell if such abstraction will continue to deliver value in the long-run.

Chris Bongers • Dec 15 '22

Yeah kind of depends on the use-case sometimes your scenario might be the better abstraction.
Some times it might be the ConditionalWrapper.

It comes down to how the abstraction takes place.

Simon Petovar • Dec 13 '22

Nice idea! 🙌

Slo Loris • Dec 13 '22

Clean code 🤩

But cant we use React.CreateElement() and conditionally select element type? The last argument of the function takes children. Enlighten me if am wrong 🤔

Chris Bongers • Dec 13 '22

Not sure I follow you mean for TypeScript safety?
Could you sketch the example here?

Dan Salahi • Dec 15 '22

import React from 'react'


interface ConditionalWrapperProps {
    condition: any
    wrapper: (children: React.ReactNode) => React.ReactNode
    children: React.ReactNode
}

export const ConditionalWrapper: React.FC<ConditionalWrapperProps> = ({ condition, wrapper, children }) => {
    return <React.Fragment>
        condition ? wrapper(children) : children
    </React.Fragment>
}

Slo Loris • Dec 13 '22 • Edited

import React, { Attributes, useState } from 'react';

type Props = {
  title: string;
  description: string;
  image: string;
  url?: string;
};

const ServiceCard = ({ title, description, image, url }: Props) => {
  return (
    <section>
      {React.createElement(
        url ? 'a' : React.Fragment,
        ({ href: url } as Attributes) ?? null,
        <>
          <h2>{title}</h2>
          <p>{description}</p>
          <img src={image} alt={title} />
        </>
      )}
    </section>
  );
};

export default function App() {
  let url = undefined;
  return (
    <div>
      <ServiceCard title="foo" description="bar" image="foo.img" />
      <ServiceCard
        title="foo"
        description="bar"
        image="foo.img"
        url="https://www.google.com"
      />
    </div>
  );
}