diff --git a/packages/react/src/components/navigation/IonTabs.tsx b/packages/react/src/components/navigation/IonTabs.tsx
index 16011d7810..3a20a115cb 100644
--- a/packages/react/src/components/navigation/IonTabs.tsx
+++ b/packages/react/src/components/navigation/IonTabs.tsx
@@ -85,6 +85,7 @@ export class IonTabs extends React.Component<Props> {
   render() {
     let outlet: React.ReactElement<{}> | undefined;
     let tabBar: React.ReactElement | undefined;
+    const { className, onIonTabsDidChange, onIonTabsWillChange, ...props } = this.props;
 
     const children =
       typeof this.props.children === 'function'
@@ -101,7 +102,7 @@ export class IonTabs extends React.Component<Props> {
         outlet = child.props.children[0];
       }
       if (child.type === IonTabBar || child.type.isTabBar) {
-        const { onIonTabsDidChange, onIonTabsWillChange } = this.props;
+
         tabBar = React.cloneElement(child, {
           onIonTabsDidChange,
           onIonTabsWillChange,
@@ -111,7 +112,7 @@ export class IonTabs extends React.Component<Props> {
         child.type === Fragment &&
         (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar)
       ) {
-        const { onIonTabsDidChange, onIonTabsWillChange } = this.props;
+
         tabBar = React.cloneElement(child.props.children[1], {
           onIonTabsDidChange,
           onIonTabsWillChange,
@@ -127,8 +128,6 @@ export class IonTabs extends React.Component<Props> {
       throw new Error('IonTabs needs a IonTabBar');
     }
 
-    const { className, ...props } = this.props;
-
     return (
       <IonTabsContext.Provider value={this.ionTabContextState}>
         {this.context.hasIonicRouter() ? (