I want to use a component passed from the props to wrap children, if defined.
interface ExampleProps {
wrapper: JSX.Element;
}
function Example({ wrapper }: ExampleProps) {
return (
// Wrap this with `wrapper`, only if it is defined, else don't wrap.
<Child></Child>
)
}
How can this we be done?
You can do this way
function Example({ wrapper }) {
if(wrapper) {
const Wrapper = wrapper //to make it alike component
return <Wrapper><Child></Child></Wrapper>
}
return (
<Child></Child>
)
}
Try:
function Example({ wrapper, children }) {
const Wrapper = wrapper || React.Fragment; // custom components should start with capital letter
return (
<Wrapper>
{children}
</Wrapper>
)
}