Reactでモーダルの本文や見出しをpropsとして渡したいです。

Question

前提・実現したいこと

react-modalを使用して、モーダルを実装しています。
下記は動作サンプルです。
CodeSandBox

モーダルと閉じるボタンを共通化し、モーダルの中身となる本文はモーダルを表示するコンポーネントからモーダルに渡すことで、効率化したいです。

発生している問題・エラーメッセージ

モーダルの本文が表示できていません。

該当のソースコード

const ModalComponent = ({ modal, modalToggle, text }) => (
  <Modal isOpen={modal}>
    <button onClick={modalToggle}>close</button>
    {text}
  </Modal>
);

const AppModalText = () => (
  <>
    <h2>App Modal</h2>
    <p>app Modal</p>
  </>
);

export default function App() {
  const [modal, setModal] = useState(false);
  const modalToggle = () => setModal(!modal);

  return (
    <>
      <button onClick={modalToggle}>open</button>
      <ModalComponent
        modal={modal}
        modalToggle={modalToggle}
        text={AppModalText}
      />
    </>
  );
}

調べたこと

「React コンポーネント props 渡す」などの語句で検索してみたものの、解決に繋がりそうなページを見つけられませんでした。

Answer 1

AppModalText は単なる変数ではなくてコンポーネントなので渡すときは

text={<AppModalText />}

としましょう。