Copied code for dialog in material-ui from docs, but isn't working, what am I doing wrong?

Question

I copied code for material-ui dialog feature for react, but couldn't figure out why this isn't working at all. Clicking the contact button doesn't even cause it to call the handleClickOpen method.

The contact button is the one that's supposed to open the dialog box, all the dialog code is copied from the docs of material-ui so I'm not sure how this couldn't be working.

export default function Banner() {
  const [open, setOpen] = React.useState(false);

  function handleClickOpen() {
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
  }
  const classes = useStyles();

  return (
    <Container maxWidth="lg">

      <div className={classes.root}>
        <Grid container spacing={7}>
          <Grid item lg={6} xs={12}>
            <div className={classes.title}>
              <Title content="Freightage Solutions" />
              <br />
              <SubTitle content="A lean, modern, and efficient shipping brokerage." />
              <div className={classes.buttons}>
                <Button ClassName={classes.button} content="Get Started" color='white' />
                <Button ClassName={classes.button} content="Contact Us" color='blue' onClick = {handleClickOpen} />
                <Dialog
                  open={open}
                  onClose={handleClose}
                  aria-labelledby="alert-dialog-title"
                  aria-describedby="alert-dialog-description"
                >
                  <DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
                  <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                      Let Google help apps determine location. This means sending anonymous location data to
                      Google, even when no apps are running.
                    </DialogContentText>
                  </DialogContent>
                  <DialogActions>
                    <Button onClick={handleClose} color="primary">
                      Disagree
                    </Button>
                    <Button onClick={handleClose} color="primary" autoFocus>
                      Agree
                    </Button>
                  </DialogActions>
                </Dialog>
              </div>
            </div>
          </Grid>
          <Grid item lg={6} xs={12}>
            <img src={Image} className={classes.image} />
          </Grid>
        </Grid>
      </div>
    </Container>
  );
}

EDIT: Here is the custom button component I'm using

import React from 'react';
import Typography from '@material-ui/core/Typography';
import { styled } from '@material-ui/styles';
import createBreakpoints from "@material-ui/core/styles/createBreakpoints";
import Button from "@material-ui/core/Button"

const breakpoints = createBreakpoints({});


const CustomButton = styled(Button)({
    border: '2px solid #FFFFFF',
    borderRadius: 80,
    height: 48,
    padding: '0 20px',
    textTransform: 'none',
    marginBottom: '20px',
    marginRight: '30px',
    marginLeft: '30px',
    [breakpoints.up("lg")]: {
        marginLeft: '0px',
    },
});

const BlueButton = styled(CustomButton)({
    background: '#0071F7',
    color: 'white',
    '&:hover': {
        background: 'white',
        color: '#0071F7',
    },
});

const WhiteButton = styled(CustomButton)({
    background: 'white',
    color: '#0071F7',
    '&:hover': {
        background: '#0071F7',
        color: 'white',
    }
});

const ButtonType = styled(Typography)({
    fontFamily: 'Ubuntu',
    fontWeight: 450,
});

export default class Title extends React.Component {
  render (){
    if(this.props.color == 'white'){
        return (
            <WhiteButton gutterBottom>
                <ButtonType>
                    {this.props.content}
                </ButtonType>
            </WhiteButton>
        )
    } else{
        return(
            <BlueButton gutterBottom>
                <ButtonType>
                    {this.props.content}
                </ButtonType>
            </BlueButton>
        )  
    }
  }
}

Azael Azael · Accepted Answer · 2019-06-24T07:30:16

It would be a good idea to use the onClick-prop you provided with to your CustomButton and set it on your button.

export default class Title extends React.Component {
  render () {
    if(this.props.color == 'white'){
        return (
            <WhiteButton onClick={this.props.onClick} gutterBottom>
                <ButtonType>
                    {this.props.content}
                </ButtonType>
            </WhiteButton>
        )
    } else{
        return(
            <BlueButton  onClick={this.props.onClick}  gutterBottom>
                <ButtonType>
                    {this.props.content}
                </ButtonType>
            </BlueButton>
        )  
    }
  }

}

Copied code for dialog in material-ui from docs, but isn't working, what am I doing wrong?

3 Answers