Unable to Pass multiple functions to onClick button in material UI

Question

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?

function handleClickAndHandleSubmit() { this.handleClick(); this.handleSubmit() }; — HoldOffHunger
– HoldOffHunger, Commented Dec 21, 2021 at 20:20
You can use something like onClick={()=> { handleSubmit(); handleClick } } — Sanmeet
– Sanmeet, Commented Dec 21, 2021 at 20:20
Why are people posting answers in the comments instead of as answers? One line answers can be appropriate. — computercarguy
– computercarguy, Commented Dec 21, 2021 at 20:21

Sam A. · Accepted Answer · 2021-12-21 20:23:27Z

3

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

Then change to onClick={onSendMsg}

answered Dec 21, 2021 at 20:23

Sam A.

7224 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sean · Accepted Answer · 2021-12-21 20:21:17Z

1

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

answered Dec 21, 2021 at 20:21

Sean

1,4763 gold badges13 silver badges32 bronze badges

Collectives™ on Stack Overflow

Unable to Pass multiple functions to onClick button in material UI

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related