So I need to access the open useState() hook from the parent, and so I wanted to "lift" this state into the parent. Carbon React, the UI-library I am using DOCUMENTATION, is missing the explanation for the code example.
const ModalStateManager = ({
renderLauncher: LauncherContent,
children: ModalContent,
}) => {
const [open, setOpen] = useState(false);
return (
<>
{!ModalContent || typeof document === 'undefined'
? null
: ReactDOM.createPortal(
<ModalContent open={open} setOpen={setOpen} />,
document.body
)}
{LauncherContent && <LauncherContent open={open} setOpen={setOpen} />}
</>
);
};
I am trying to lift the state up, meaning keeping open in the parent component, but i can't seem to get around the strange props that renderLauncher and children are, they keep throwing a different error, each time i try another way.
i tried:
import ReactDOM from "react-dom";
import { LauncherContent, ModalContent } from "@carbon/react";
import React from "react";
type Props = {
renderLauncher?: unknown;
children?: unknown;
open: boolean;
setOpen: (newOpen: boolean) => void;
};
export const LiftedModalStateManager: React.FC<Props> = ({
renderLauncher: LauncherContent,
children: ModalContent,
open,
setOpen,
}) => {
return (
<>
{!ModalContent || typeof document === "undefined"
? null
: ReactDOM.createPortal(
<ModalContent open={open} setOpen={setOpen} />,
document.body,
)}
{LauncherContent && <LauncherContent open={open} setOpen={setOpen} />}
</>
);
};
but IDE throws-> TS2604: JSX element type ModalContent does not have any construct or call signatures. Any ideas or explanations on how this component works, especially the LauncherContent and ModalContent Components/Instances?