How to conditionally wrap an element in React

Posted on

in

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

<ConditionalWrapper condition={element.url} 
                 wrapper={(children:any) => <a href={element.url} target="_blank" rel="noreferrer">{children}</a>}>
      /* children content inside your link */
</ConditionalWrapper>

The ConditionalWrap component checks the condition (in this example the element.url) and if it exists put the wrapper around the children, otherwise just render the children. The wrapper in this example is a link. You can put whatever content you want where the comment is to be put inside the link.

Leave a Reply

Your email address will not be published. Required fields are marked *

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

June 2025
M T W T F S S
 1
2345678
9101112131415
16171819202122
23242526272829
30