DEV Community

Conditional wrapping in React

Chris Bongers on December 11, 2022

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...

Read full post

Alex Lohr • Dec 11 '22

Great idea, Chris & Olivier!

This becomes even more powerful if you make it an array of (wrapper | false)[], so you can express multiple conditional wrappers in a more readable (less deep) structure:

const ApplyWrappers = ({ wrappers, children }) => {
  const wrapper = wrappers.shift()
  if (wrapper) {
    children = wrapper(children);
  }
  return wrappers.length
    ? <ApplyWrappers wrappers={wrappers} children={children} />
    : children;
}

This allows you to use

<ApplyWrappers wrappers={[
  condition1 && (children) => <Whatever>{children}</Whatever>,
  condition2 && ...
]}>
  ...
</ApplyWrappers>

P.S.: Wrote that on my cellphone, so this is untested.

Jerry • Dec 13 '22

Sir you are a legend.

Was this you ? 👇

Alex Lohr • Dec 13 '22

Nope, I used a normal cellphone. I don't think it would work, had I written it on that.

Chris Bongers • Dec 12 '22

Oh like that idea! 👀

Alex Lohr • Dec 12 '22

I just realized this could be made even simpler using Array.prototype.reduce:

const ApplyWrappers = ({ wrappers, children }) => wrappers.reduce(
  (children, wrapper) => wrapper ? wrapper(children) : children,
  children
);

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.

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 🙏

Julia 👩🏻‍💻 GDE • Dec 11 '22

Thanks for this really good piece of code 🙏

Question: When you use Conditionalwrapper inside Servicecard, is the closing </a> right or should it be </>?

Chris Bongers • Dec 12 '22

Ah sorry my bad, should have been the fragment closing 👀

Muhammad Usman • Dec 11 '22

Hi @julia
I believe that might be a typo from the author end, </> should be used.

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.

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.

Ismail Cherri • Dec 14 '22

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

Slo Loris • Dec 15 '22

Thats something handy 😃

Chris Bongers • Dec 15 '22

Awesome! I'll go check it out

Yuki Kimoto - SPVM Author • Dec 15 '22

I feel this is similar with Mojo::Template.

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

Valiant600 • Dec 15 '22

FYI

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

Uzoma Nwanne • Dec 15 '22

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

Imam Ali Mustofa • Dec 12 '22

You jus't doing something unconventional method, and that metaphor really great! You're Code Freestyler!

Joan Roucoux • Dec 13 '22

Thanks for sharing!

Hector Zurga • Dec 12 '22

This is the cleanest solution to conditional rendering I've seen so far!! Really clean implementation

Iraitz Puente • Dec 13 '22

That sounds promising! I will test this in some of my projects! Thanks!

Phu Hoang • Dec 13 '22

Good thinking! Thanks for sharing

Morokhovskyi Roman • Dec 11 '22

Good material, Chris!

Simon Petovar • Dec 13 '22

Nice idea! 🙌

Mohammad Sohrab Hossain • Dec 15 '22

Great article.

Thanks man

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} 
/>

Venelin • Dec 11 '22

Great trick.
The only problem is that the else condition outputs invalid HTML. You shouldn't put block elements inside inline.
Here is a trick how to achieve similar functionality !
codepen.io/venelinn/pen/qBKBoPo

Chris Bongers • Dec 12 '22

Ah yeah didn't really pay much attention to what I wrapped for the example purpose.

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>
  );
}

Whole code with render. Ignore the types in the example as I have used TS. Works in JS too. Working example: stackblitz.com/edit/vitejs-vite-wb...

Chris Bongers • Dec 14 '22

Ah yes would work, but less reusable I guess when needing it more than once.

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.