Lifting state up into Parent, with strange carbon component?

34 Views Asked by At

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?

0

There are 0 best solutions below