one-line React component for conditionally wrapping children

conditionalwrap.js

import React from 'react';

const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children;

const Header = ({shouldLinkToHome}) => (
  <div>
    <ConditionalWrap
      condition={shouldLinkToHome}
      wrap={children => <a href="/">{children}</a>}
    >
      <img src="logo.png"/>
    </ConditionalWrap>
  </div>
)

here we go, nice TS code

import React, { FC } from "react"

interface WrapProps {
  if: boolean
  with: (children: React.ReactNode) => JSX.Element
}

export const Wrap: FC<WrapProps> = ({ if: condition, with: wrapper, children }) => {
  return condition ? wrapper(children) : <>children</>
}

check out https://github.com/kitze/conditional-wrap

@kitze Small question)) For what reasons React.cloneElement is used?

I have an improvement suggestion for this:

import { FC, ReactNode, createElement } from 'react';

interface WrapProps {
	if?: boolean;
	with: typeof createElement.arguments[0];
	wrapperProps: typeof createElement.arguments[1];
	children: NonNullable<ReactNode>;
}

const Wrap: FC<WrapProps> = ({
	if: condition,
	with: wrapper,
	wrapperProps,
	children,
}) =>
	condition ? createElement(wrapper, wrapperProps, [children]) : <>children</>;

export default Wrap;

By using createElement we can use Wrap like so:

<Wrap if={condition} with="a" wrapperProps={{ 'data-testid': 'wrapper' }}>
    <p>Wrapped text</p>
</Wrap>

Instead of always passing a (children) => <jsx /> function.

FYI this function breaks the react/no-unstable-nested-components eslint rule.