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?
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}</>
);
};
If you define your function as const Element = (Wrapper):...-->Wrapper refers to the Element properties, not the Wrapper property, changing to const Element = ({Wrapper}):... will work.
I think you can make you code shorter and save a few lines by doing this:
const ConditionalWrapper = ({
condition,
children,
element,
defaultElement
}: ConditionalWrapperProps): JSX.Element => {
const Wrapper = condition ? element : defaultElement || Fragment;
return (<Wrapper>{children}</Wrapper>)
}