I have a button that looks like:

<Grid item xs={4} sm={12} md={6}>
                    <Button
                      variant="contained"
                      color="success"
                      type="submit"
                      onClick={(handleClick, handleSubmit)}
                      value="Send"
                    >
                      Send message
                    </Button>
                    <Snackbar
                      open={open}
                      autoHideDuration={5000}
                      onClose={handleClose}
                    >
                      <Alert
                        variant="filled"
                        severity="success"
                        autoHideDuration={500}
                        onClose={handleClose}
                      >
                        {"Message sent!"}
                      </Alert>
                    </Snackbar>
                  </Grid>

The button only calls the first function passed to onClick send button. How do make it so that both functions are called?

CodePudding user response：

const onSendMsg = () => {
  handleClick()
  handleSubmit()
}

Then change to onClick={onSendMsg}

CodePudding user response：

wrap both functions inside a parent function and execute both on the click