Create react component to conditionally wrapping children

I would like to create a ConditionalWrapper component to being more declarative, in my app.

My idea is to use it as following

<ConditionalWrapper condition={whatever} element={<a href="my-link" />}>
 ...other children
</ConditionalWrapper>

I got this so far, but obviously it is not working, and I really cannot see where I am wrong.

interface ConditionalWrapperProps {
  condition: boolean
  children?: React.ReactNode
  element: React.ReactElement
  defaultElement?: React.ReactElement
}

const ConditionalWrapper = ({
  condition,
  children,
  element,
  defaultElement
}: ConditionalWrapperProps): JSX.Element => {
  const Element = (Wrapper): JSX.Element => <Wrapper>{children}</Wrapper>
  return condition ? (
    <Element Wrapper={element}>{children}</Element>
  ) : (
    <Element Wrapper={defaultElement || Fragment}>{children}</Element>
  )
}

The error I get at the moment is Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

It’s clear that my types and logic are wrong, but I also tried different variations without success. Any suggestions?

Answer

You need to do several things. First of all your Element function isn’t actually a valid React Function Component.

Then you need to accept parameters which are function components, and not quite elements yet.

I have separated the Element into its own scope called ElementWrapper, just for sake of understanding how the parameters were incorrect. You can of course move this back into the ConditionalWrapper.

You’ll also have to move the fragment logic elsewhere, since Fragment is not a FunctionComponent

interface ConditionalWrapperProps {
  condition: boolean;
  children?: React.ReactNode;
  element: React.FunctionComponent; //These need to be FunctionComponents
  defaultElement?: React.FunctionComponent;
}

//Here you can see you forgot to have a children property
const ElementWrapper = (props: {
  Wrapper: React.FunctionComponent;
  children: React.ReactNode;
}): JSX.Element => <props.Wrapper>{props.children}</props.Wrapper>;

const ConditionalWrapper = ({
  condition,
  children,
  element,
  defaultElement,
}: ConditionalWrapperProps): JSX.Element => {
  return condition ? (
    <ElementWrapper wrapper={element>{children}</ElementWrapper>
  ) : DefaultElement ? (
    <ElementWrapper Wrapper={defaultElement}>{children}</ElementWrapper>
  ) : (
    <>{children}</>
  );
  );
};

Personally I don’t think you even need the ElementWrapper class function, just call the functionComponents directly in ConditionalWrapper, like so. The properties are renamed to follow the guidelines that React Elements should have capitalized names.

const ConditionalWrapper = ({
  condition,
  children,
  WrapperElement,
  DefaultElement,
}: ConditionalWrapperProps): JSX.Element => {
  return condition ? (
    <WrapperElement>{children}</WrapperElement>
  ) : DefaultElement ? (
    <DefaultElement>{children}</DefaultElement>
  ) : (
    <>{children}</>
  );
};