IonTab onClick handler not working - Ionic React

This is a quick article written to help those who encounter an issue when you try passing a function handler to the onClick prop present in the IonTab component but it doesn’t get called as expected.

Solution

Use the onIonTabsWillChange prop on the IonTabs component to call the function:

const openModal= () => {
	// do something cool
}

<IonTabs
  onIonTabsWillChange={(e) => {
		if (e.detail.tab === "tabName") {
	    // call function here
			openModal()
		}
  }}
>
	<IonTabButton tab="tabName">
		...
	</IonTabButton>
</IonTabs> 

Conclusion

If you’re reading this, I hope this solution worked for you. You can also check out other articles I have on my blog. Happy coding!