0
0 Comments

These are my codes for the snackbar and it wasn’t working whenever I’ll click the button. I wanted the snackbar to appear once I’ll click the button "confirm". Almost all of the examples I have seen are in a functional component, so how can I make the Snackbar work as expected in a class component?

class name extends Component {
  constructor() {
    super();
    this.state = { orders: [], open: false };
  }

  handleOpen = () => this.setState({ open: true });

  handleClose = () => this.setState({ open: false });

  columns = [
    {
      name: "Confirm",
      options: {
        customBodyRender: (value, tableMeta) => {
          return (
            <FormControlLabel
              value={value}
              control={
                <Button>
                  confirm
                </Button>
              }
              onClick={(e) => {
                try {
                  //firestore codes
                  );
                } catch (err) {
                  console.log(err);
                }
                this.handleOpen();
              }}
            />
          );
        },
      },
    },

  ];

   //code for options

   //data fetching codes
  
  render() {
    const { open } = this.state;
    return this.state.orders ? (
      <div>
        //muidatatable codes
        <Snackbar
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left",
          }}
          open={open}
          onClose={this.handleClose}
          autoHideDuration={2000}
          // other Snackbar props
        >
          Order Confirmed
        </Snackbar>
      </div>
    ) : (
      <p>Loading...</p>
    );
  }

}

Anonymous Asked question May 13, 2021