【React】Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(Modal)`, but its value is `null`.の対処法

症状

MaterialUIのModalを使用したとき、以下の警告が表示されました。 翻訳すると、「警告：失敗したプロップタイプ：プロップ「open」は「ForwardRef（Modal）」で必須としてマークされていますが、その値は「null」です。」でした。 「openが必須だが、openにnullが入っている」から警告されているようです。

warn

Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(Modal)`, but its value is `null`.

解決策

なぜか、useStateのopenの初期値をnullにしていたため、発生していました。 MaterialUIそのままだと、falseなのになぜそのまま使わなかった。。。

以下はMaterialUIのBasic modalから引用。

Modal.js

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
};

export default function BasicModal() {
  //ここをなぜかnullで設定していた
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div>
      <Button onClick={handleOpen}>Open modal</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Text in a modal
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
          </Typography>
        </Box>
      </Modal>
    </div>
  );
}

参考