I'm getting an error with Typescript linting error on my custom ConditionalWrapper Component. The component will conditionally wrap another component based on a condition
Question:
How can I properly type wrapper prop for type ConditionalWrapperProps?
import React from "react";
type ConditonalWrapperProps = {
children: React.ReactElement;
condition: boolean;
// ESLint: 'children' is defined but never used.(no-unused-vars)
wrapper: (children: React.ReactElement) => JSX.Element;
};
const ConditonalWrapper: React.FC<ConditonalWrapperProps> = ({
condition,
wrapper,
children
}) => (condition ? wrapper(children) : children);
export { ConditonalWrapper };
and in use
const Block: React.VoidFunctionComponent = () => (
<ConditonalWrapper
condition
wrapper={(children) => <h1>I am wrapped: {children}</h1>}
>
<h1 className="text-red-400">Child Text</h1>
</ConditonalWrapper>
);