IonTabButton not responding to onClick events

Currently, I am utilizing the Ionic 5 CSS library in combination with React.

I found that IonTabButtons have a more appealing style compared to IonButtons because IonTabButton allows for text below the Icon. In the screenshot provided, all icons are displayed as tab-buttons except for Home, which is styled as an IonButton.

While I appreciate the appearance of IonTabButton, I encountered an issue where it does not execute the onclick function (no output on the console).

My query pertains to whether it would be easier, better, or even possible to:

  1. Add onClick functionality to iontab, or
  2. Transform IonButton to resemble IonTabButton's layout with both icon and text positioned inside the button.

If the preferred option is b), do you happen to know where one can locate the default CSS properties of IonButton and IonTabButton to identify their differences and potentially make them appear similar more easily?

https://i.sstatic.net/P4F2p.png

import React from 'react'
import { useHistory } from 'react-router-dom'
import './Welcome.css'

// ionic lib imports
import {
   IonButton,
   IonCol,
   IonContent,
   IonGrid,
   IonIcon,
   IonLabel,
   IonPage,
   IonRow,
   IonTabButton
} from '@ionic/react'

// ionic icon imports
import {
   cog,
   help,
   home,
   power,
   walk
} from 'ionicons/icons'

const Welcome = (props) => {

   let history = useHistory()

   const handleHomeClick = () => {
      console.log('clicked')
      history.push('./Running')
   }

   return(
      <IonPage>
         <IonContent>
            <IonGrid>
               <IonRow>
                  <IonCol size='6'>
                     <IonButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={home} />
                        Home
                     </IonButton>
                  </IonCol>
                  <IonCol size='6'>
                     <IonTabButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={walk}></IonIcon>
                        <IonLabel> Jog </IonLabel>
                     </IonTabButton>
                  </IonCol>
               </IonRow>
               <IonRow>
                  <IonCol size='6'>
                     <IonTabButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={cog}></IonIcon>
                        <IonLabel> Settings </IonLabel>
                     </IonTabButton>
                  </IonCol>
                  <IonCol size='6'>
                     <IonTabButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={help}></IonIcon>
                        <IonLabel> Help </IonLabel>
                     </IonTabButton>
                  </IonCol>
               </IonRow>
               <IonRow>
                  <IonCol size='6'>
                     <IonTabButton
                        fill='clear'
                        onClick={handleHomeClick}
                     >
                        <IonIcon icon={power}></IonIcon>
                        <IonLabel> Power </IonLabel>
                     </IonTabButton>
                  </IonCol>
               </IonRow>
            </IonGrid>
         </IonContent>
      </IonPage>
   )
}

export default Welcome



/* CSS Rules For Welcome.js  */

ion-icon {
   font-size: 128px;
   color: white;
}

ion-grid {
   padding-top: 120px;
}

ion-col {
   justify-content: center;
}

ion-row {
   margin: 15px;
}

ion-button {
   height: 128px;
   width: 128px;
   line-height: 10px;
}

ion-label {
   font-size: 24px;
}


Answer №1

https://i.sstatic.net/qeokr.png

This is the solution I came up with. I modified IonTabButton to be IonButton and applied similar styling. To achieve this, I included the following CSS:

.transparent{
    background-color: #0000;
}
.big-text{
    font-size: 150%;
}
.fill{
    width: 100%;
    height: 100%;
}

I created the below class:

interface ButtonInterface{
    icon: any;
    label: string;
    callback(): any;
}

const Button = ({icon,label,callback}:ButtonInterface)=>{
    return (
    <IonItem lines="none">
        <IonButton
           fill='clear'
           onClick={callback}
           color="dark"
           className="fill"
        >
        <IonList className="transparent">
            <IonIcon
               className="big-text"
               icon={icon}
            />
            <IonLabel>{label}</IonLabel>
        </IonList>
        </IonButton>
    </IonItem>
    );
}

Here is how the final HTML structure looks:

<IonPage>
    <IonContent>
        <IonGrid>
            <IonRow>
                <IonCol size='6'>
                    <Button icon={home} label="Home" callback={handleHomeClick} />
                </IonCol>
                <IonCol size='6'>
                    <Button icon={walk} label="Jog" callback={handleHomeClick} />
                </IonCol>
            </IonRow>
            <IonRow>
                <IonCol size='6'>
                    <Button icon={cog} label="Settings" callback={handleHomeClick} />
                </IonCol>
                <IonCol size='6'>
                    <Button icon={help} label="Help" callback={handleHomeClick} />
                </IonCol>
            </IonRow>
            <IonRow>
                <IonCol size='6'>
                    <Button icon={power} label="Power" callback={handleHomeClick} />
                </IonCol>
            </IonRow>
        </IonGrid>
    </IonContent>
</IonPage>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Compiling 'react-scripts' to include a few images as data URIs within the CSS file

I have recently inherited a sizable React project, even though my experience with React is limited. Nonetheless, I am attempting to make improvements in areas where I feel confident. An ongoing issue we are facing is the excessive size of our main CSS fil ...

Why does React-Perfect-Scrollbar not work properly when the height of an element is not specified in pixels?

Currently, I am developing a chat application with React 18 for its user interface. The app includes a sidebar that displays user profiles. To ensure the app fits within the browser window height, I've made the list of user profiles scrollable when n ...

Beginner experiencing website overflow problem

After completing a basic web development course, I decided to create my first homepage. While I am satisfied with how it looks on a PC or laptop, the layout gets messy on mobile devices. I tried using <meta name="viewport" content="width= ...

Smooth animation is not being achieved with the Jquery dlmenu

I have implemented a multi-level navigation menu using a demo of the jquery dlmenu plugin v1.0.2. Although most of the functions are working smoothly, the CSS3 menu navigation lacks the fluidity of the jQuery left/right sliding effect. Is there a way to ...

Embed an external website within a div element

Is there a way to embed an entire external website onto another site, without scroll bars or borders? I attempted this method but the entire page did not load, and there were still scroll bars and borders present. <!DOCTYPE HTML> <html> <b ...

I am encountering an issue with the callback function not functioning properly when utilizing react-flutterwave-rave in test mode. What could

I have integrated Flutterwave as the payment system for my web application that I am currently developing using React. To facilitate this integration, I have utilized the react-flutterwave-rave package available on npm. The implementation is functioning ...

Tips for swapping out a page for a component

Consider a scenario where we have a blog page containing a div element with the class "content" that displays previews of various articles. The goal is to dynamically replace the content within the div element with a specific article. How can this be acco ...

Tips for spinning the background of a button without rotating the button itself

I'm encountering an issue while trying to rotate the background-image within my button. Instead of showing the specified background image, only the background color is visible. The photo includes a transparent section to achieve an arch-like appearanc ...

The element type provided is not valid: it was expecting a string but received undefined. Please review the render method of AnimatedComponent in ReactNavigation

I've been facing an issue for the past few days with ReactNavigation v6+. While there are multiple questions and answers about the invalid element type, none of them seem to be working with this specific example: The problem arose after integrating t ...

Guide to automatically adjust child div width to match parent container dimensions

I need assistance with structuring my HTML page, which consists of header, main, and footer sections. Below is the HTML and CSS code I'm utilizing: HTML code : <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

"Ionic 3: Utilizing the If Statement within the subscribe() Function for Increased Results

I added an if conditional in my subscribe() function where I used return; to break if it meets the condition. However, instead of breaking the entire big function, it only breaks the subscribe() function and continues to execute the navCtrl.push line. How ...

Tips for dynamically changing the number of visible ListItems in React using a single method

I recently stumbled upon the perfect solution at this link using material-ui. The chapter on "Nested list items" caught my attention, as it only has one nested item with a method for expanding more or less. In my sidebar, I have two nested items that both ...

Make sure to define the `render` function in your React ES6 code, as it could have

Hey there! I've been struggling for a bit and can't seem to figure out what's wrong. Can you help me out? Here is the error message that's been popping up: Warning: App(...): No `render` method found on the returned component instance ...

What are the essential steps for effectively unit testing a React component?

When it comes to testing a react component, what are the recommended best practices and key elements to focus on? Typically in standard tests, I verify if the correct state and input produce the expected output. However, React components introduce a uniqu ...

What is causing my divs not to center with justify-content?

I've been working on centering two divs inside a parent div horizontally. The parent div is set to flex-direction: column so that the child divs stack one below the other, but I want them centered in the middle of the page. Although justify-content: ...

Toggle the backgroundImage visibility by setting it to either hidden or displayed using jquery

$('.arrow').css("background-image", "url('../img/arrow.png')").hide(); I have implemented a custom solution using CSS and jQuery to hide the downward arrow when scrolling down on my webpage. `$( document ).ready(function() {
 co ...

unable to make a request to the express server with axios

I am in the process of developing a chat application similar to whatsapp. One of the key features I'm working on is that when a user clicks on another person's name, their chats will be displayed. However, currently, I'm facing an issue wher ...

What is the process for adding color to the rows of a table?

Hello, I have a table with various fields that include: I am looking to assign colors to entire rows in the table based on certain criteria. For example, if the ASR value falls between 75 and 100, it should be assigned one color; for values between 50 and ...

What could be causing my tabs to shift to the vertical side when using large, larger, and wide screens?

In my previous research, I came across a question similar to mine: Pure CSS accordion not working within CSS tabs. The solution mentioned works perfectly on monitors of any size, but the difference lies in the use of the a element. In their code, setting t ...

Align the input labels to the right

In the demonstration below, an example is provided for aligning labels to the right of an input field. Is there a way to ensure that the input field takes up 100% of the width? Additionally, can an input be replaced with a textarea or another div element w ...