javascript - isDialogOpen is not set to true

Question

I use mui-datatable for creating table in my project

I use a datatable for creating table in my project and i try to use a customDialog for confirm deleting items from the table.

When I use setIsDialogOpen(true) in handleRowsDelete callback function to change the state and showing confirmDialog, it doesn't work and isDialogOpen state doesn't become true what is the problem?

import React from "react";
import MUIDataTable from "mui-datatables";
import { Edit } from "@material-ui/icons";
import { connect } from "http2";
import ConfirmDialog from "../../partials/ConfirmDialog";

interface Data {
  name: string;
  mobile: string;
  email: string;
  createdAt: string;
  coursesCount: number;
}
interface ListProps {
  rows: Data[];
  deleteItems:Function;
}

const handleCellClick = (e: any) => {
  console.log(e);
};

export default function List({ rows , deleteItems }: ListProps) {
  const [isDialogOpen, setIsDialogOpen] = React.useState<boolean>(false)
  const [confirmDelete, setConfirmDelete] = React.useState<boolean>(false)

  const handleRowsDelete = (e: any,data:any):void|false => {
    console.log(isDialogOpen)
    setIsDialogOpen(true)
    console.log(isDialogOpen)
    return false;
  };

  const handleDialog = (isConfirm:boolean) => {
      setConfirmDelete(isConfirm)
      // setIsDialogOpen(false)
  }

  return (
    <div style={{ maxWidth: "100%" }}>
      <ConfirmDialog dialogTitle='?????' dialogBody='' isOpen={isDialogOpen} handleConfirm={handleDialog}/>
      <MUIDataTable
        title={"?????? ??"}
        data={rows}
        columns={[
          { label: "???", name: "name" },
          { label: "??????", name: "mobile" },
          { label: "?????", name: "email" },
          { label: "????? ?????", name: "createdAt" },
          { label: "????? ???? ??", name: "coursesCount" },
        ]}
        options={{
          onRowClick: handleCellClick,
          onRowsDelete: handleRowsDelete,
          textLabels: {
            body: {
              noMatch: "???????? ????? ???? ???",
              toolTip: "Sort",
              columnHeaderTooltip: (column) => `???? ???? ???? ${column.label}`,
            },
            pagination: {
              next: "???? ? ????",
              previous: "???? ? ????",
              rowsPerPage: "????? ???? ??",
              displayRows: "??",
            },
            toolbar: {
              search: "?????",
              downloadCsv: "?????? CSV",
              print: "???",
              viewColumns: "???? ??",
              filterTable: "????? ??",
            },
            filter: {
              all: "???",
              title: "????? ??",
              reset: "????????",
            },
            viewColumns: {
              title: "????? ???? ??",
              titleAria: "?????/????",
            },
            selectedRows: {
              text: "???? ?????? ??",
              delete: "???",
              deleteAria: "??? ???",
            },
          },
          rowsPerPageOptions: [10, 25, 50],
        }}
      />
    </div>
  );
}

question from:https://stackoverflow.com/questions/65938502/isdialogopen-is-not-set-to-true

Answer 1

Waitting for answers