React 親と子のコンポーネントの呼ばれ方

単体の削除ボタンと一括の削除ボタンがあります。
どちらのボタンも押した後はモーダル（DeleteDialogコンポーネント）が表示されます。
一括削除は親コンポーネント(index.tsx)からDialogDeleteにhandleDeleteNamesを渡しています。
単体削除は子コンポーネントのListItemコンポーネントからDialogコンポーネントにhandleDeleteを渡しています。
どちらの削除でもmodalStateを使いOpenの時にモーダルを表示しCloseの時は閉じるようにしたいのですがなぜか最初からmodalが表示されてしまいます。
表示されるのは子コンポーネントのモーダルです。初期値はcloseにしているのですがなぜなのでしょうか？

index.tsx

enum ModalState {Open, Close }
const {Open, Close } = ModalState;

interface CheckItem {
  isCheck: boolean;
}

type nameCheckBoxItem = INames & CheckItem;

interface IState {
  name: string;
  names: nameCheckBoxItem[];
  modalState: ModalState;
}

const Index:FC<Props> = () => {
  const [state, setState] = useState<State>({
    name: '',
    names: [],
    modalState: Close,
  

 ~省略~

  const handleDelete = (deleteItem: INames) => {
　　// 単体の削除ボタンの処理
  };

  const handleDeleteNames = (checkedNames: nameCheckBoxItem[]) => {
　 // 　一括削除ボタンの処理
  };

  const modalOpen = () => {
    setState({ ...state, modalState: Open });
  };

  const handleClose = () => {
    setState({ ...state, modalState: Open });
  };


  return (
    <React.Fragment>
      <ListItemIcon>
        <Checkbox
          onChange={(_, checked) => onChangeAll(checked)}
          disabled={false}
          color="primary"
        />
      </ListItemIcon>
      <Text>
        グループ
      </Text>
        <Button
          color="secondary"
          onClick={modalOpen}
        >
          削除
        </Button>
        {
          currentNames.map((names: nameCheckBoxItem, index: number) => (
            <ListItem
              isCheck={names.isCheck}
              name={name}
              onDelete={handleDelete}
            />
          ))
        }
      <DeleteDialog
      open={ModalState.Open=== state.modalState}
      handleDelete={() => handleDeleteNames(nameCheckBoxItem)}
      handleClose={handleClose}
      />
    </React.Fragment>
  );
};

enum ModalState {Open, Close }
const {Open, Close } = ModalState;

interface Props {
  names:names;
  isCheck: boolean;
  onDelete: (name: name) => void;
}

const ListItem: React.FC<Props> = ({
  names,
  isCheck,
  onChange,
  onDelete,
}) => {

const [modalStateB, setModalStateB] = useState<ModalState>(Close);
  const modalOpen = () => {
    setModalStateB(Open);
  };

  const handleClose = () => {
    setModalStateB(Close);
  };
return(
  <Fragment>
　　    　〜　省略　　　〜
        <IconButton
          disabled={false}
          onClick={modalOpen}
        >
        </IconButton>
      </ListItem>
    </List>
    <DeleteDialog
      open={modalStateB === ModalStates.Open}
      handleClose={handleClose}
      handleDelete={() => onDelete(names)}
    />
  </Fragment>
  );
}
export default ListItem;

//追記

interface Props {
  handleClose: () => void;
  handleDelete: () => void;
  open: boolean;
}

const DeleteDialog: React.FC<Props> = ({
  handleDelete,
  handleClose,
  open,
}) => (
  <Dialog
    open={open}
    onClose={handleClose}
  >
    <DialogActions>
      <Button
        onClick={handleClose}
        color="primary"
      >
        キャンセル
      </Button>
      <Button
        onClick={handleDelete}
        color="secondary"
        autoFocus
      >
        削除
      </Button>
    </DialogActions>
  </Dialog>
  );

export default DeleteDialog;

maisumakun

2020/02/21 01:16

<DeleteDialog>の定義はどのようなものでしょうか。

m.ts10806

2020/02/21 01:41

React関係でよく回答依頼をいただきますが、タグのスコア見られたら分りますように回答不可な範囲です。タグ別ランキングで上位にきている方に振られたほうが良いかと思います。

hoshi-takanori

2020/02/21 01:41

DeleteDialog の中で open をチェックして、true の場合のみ表示する必要があります。ところで、ModalStates が2箇所で定義されたり、値は Open, Close なのに Show と比較してるのはなぜでしょうか？また、Index の state ですが、Hooks を使うなら name, names, modalState を個別に useState() するのが一般的だと思います。