call multiple functions in onClick

Question

I have this span:

<span className="close" onClick={this.props.handleClose}><u>Close</u> X</span>

handleClose sets a property which is used to either show or hide a popup. I want to edit this onClick to also call a rest endpoint if updateDocsFlag is set to true by this function:

doIsChecked() { var isItChecked = document.getElementById('isPless') as HTMLInputElement; if (isItChecked.checked) { this.setState({ updateDocsFlag: true }); } else { this.setState({ updateDocsFlag: false }); } }

Can that be done? If so I assume if it can it'll be something like creating a function to make the rest call and including it in the onClick but I'm not sure if multiple functions can be called in this way.

handleClose comes from a different class. This is what it looks like:

<Pless handleClose={this.hidePless} showPless={this.state.showPlessPrompt} /> hidePless = () => { this.setState({ showPlessPrompt: false }); };

In my Pless class I have this interface:

interface Props { handleClose: () => void; showPless: boolean; }

What is stopping you from creating a function handleCloseClick() that first calls handleClose then checks updateDocsFlag and calls the API when true? — Raul Sauco
– Raul Sauco, Commented Jan 25, 2022 at 7:31
They can be done. Please try and show us your code for handleClose and API call — Tushar Shahi
– Tushar Shahi, Commented Jan 25, 2022 at 7:37
OK trying that. If I just move this.props.handleClose to handleCloseClick() I get unused expression, expected an assignment or function call: handleCloseClick() { this.props.handleClose; if (this.state.updateEdocsFlag) { this.edocsService.updateEdocsStatus(); } } — runnerpaul
– runnerpaul, Commented Jan 25, 2022 at 7:44
I added some info around handleClose() to my question as I'm not sure how I can call them inside it. — runnerpaul
– runnerpaul, Commented Jan 25, 2022 at 8:10

Hkrie · Accepted Answer · 2022-01-25 08:29:02Z

<span className="close" onClick={this.props.onclick}><u>Close</u> X</span> // basically this is what you want no? const onclick = () => { handleClose(); doIsChecked(); };

If you need the event then you can pass it from the onclick function to the handleClose or doIsChecked

Update:

Actually the script above is more general. In your case it would probably look like this:

<span className="close" onClick={onclick}><u>Close</u> X</span>

.

const onclick = () => { this.props.handleClose(); doIsChecked(); };

Collectives™ on Stack Overflow

call multiple functions in onClick

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related