Material UIのモーダル使用時に発生したエラー

エラー内容

Material UIのModalを使っていたのですが、自作のコンポーネントをModalのbodyの代わりに使おうとしたらエラーが発生しました。

以下、エラー内容です。

Warning: Function components cannot be given refs.
Attempts to access this ref will fail.
Did you mean to use React.forwardRef()?

Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Modal)`.
Expected an element that can hold a ref.
Did you accidentally use a plain function component for an element instead?

このようなエラーが出てしまい「？」状態が続いていました。

解決方法

結局、冒頭に書いた通りの中に、下記コードのように自分で作ったコンポーネントを当てはめていたことが原因だったみたいです。

sample.tsx

<Modal>
  {<Body/>}
</Modal>

なので、同じファイルの中にconst = body()を作り直し、それをModalの中に当てはめることにしました。
そうすることで、エラーは消えました。

sample.tsx

const body = (
  <div>
    <p>ほげほげ</p>
　　 -- もろもろ省略 --
  </div>
)

return (
  <Modal>
    {body}
  </Modal>
)

まとめ

本来、公式の方でも、直接Modalの中身を書いていたり、Typographyなどを用いていたので、しっかりそちらを参照するべきでしたね。

次から気をつけていきたいと思います。