Tab not displaying content properly (Ionic/React)

Hey, Im having some problems on rendering some pages on tabs. It works sometimes, but most of the time it shows a blank page, the thing is at the console, it doesn’t show any error and even it shows my console.log from the right page.

app.tsx
import { Redirect, Route } from ‘react-router-dom’;
import { IonApp, IonRouterOutlet, setupIonicReact } from ‘@ionic/react’;
import { IonReactRouter } from ‘@ionic/react-router’;
import ‘chartjs-plugin-zoom’

/* Core CSS required for Ionic components to work properly */
import ‘@ionic/react/css/core.css’;

/* Basic CSS for apps built with Ionic */
import ‘@ionic/react/css/normalize.css’;
import ‘@ionic/react/css/structure.css’;
import ‘@ionic/react/css/typography.css’;

/* Optional CSS utils that can be commented out */
import ‘@ionic/react/css/padding.css’;
import ‘@ionic/react/css/float-elements.css’;
import ‘@ionic/react/css/text-alignment.css’;
import ‘@ionic/react/css/text-transformation.css’;
import ‘@ionic/react/css/flex-utils.css’;
import ‘@ionic/react/css/display.css’;

/* Theme variables */
import ‘./theme/variables.css’;
import Login from ‘./pages/Login’;
import Register from ‘./pages/Register’;
import Menu from ‘./pages/Menu’;

setupIonicReact();

const App: React.FC = () => (











);

export default App;

Menu.tsx

import { IonButton, IonContent, IonHeader, IonIcon, IonItem, IonMenu, IonMenuToggle, IonPage, IonRouterOutlet, IonSplitPane, IonTitle, IonToolbar } from ‘@ionic/react’;
import { Redirect, Route } from ‘react-router’;
import React from ‘react’;
import Data from ‘./data’
import Settings from ‘./Settings’;
import { analyticsOutline, bookOutline, fitnessOutline, heartCircleOutline, heartHalfOutline, heartOutline, homeOutline, logOut, logOutOutline, personCircleOutline, settingsOutline } from ‘ionicons/icons’;
import DadosFolha from ‘./dataFolha’;
import dadosFundeb from ‘./dataFundeb’;
import DadosSaude from ‘./dataSaude’;

const Menu: React.FC = () => {
const paths = [
{name: ‘Dados Gerais’, url: ‘/app/data’, icon: analyticsOutline },
{name: ‘Despesa com Pessoal’, url: ‘/app/dataFolha’, icon: personCircleOutline},
{name: ‘FUNDEB’, url: ‘/app/dataFundeb’, icon: bookOutline},
{name: ‘Saúde’, url: ‘/app/dataSaude’, icon: fitnessOutline},
{name: ‘Configuração’, url:‘/app/settings’, icon: settingsOutline },
];
return (




<IonToolbar color={‘secondary’}>
Menu



{paths.map((item, index) => (



{item.name}


))}



Logout
















);
};

export default Menu;

Data.tsx

import { IonButtons, IonContent, IonHeader, IonIcon, IonLabel, IonMenuButton, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs, IonTitle, IonToolbar } from ‘@ionic/react’;
import React from ‘react’;
import { Redirect, Route } from ‘react-router’;
import GraficosGeral from ‘./Graficos’;
import Relatorio from ‘./Relatorio’;
import { pieChart, speedometerOutline, statsChart, } from ‘ionicons/icons’;
import DadosGerais from ‘./dataGeral’;

const SettingsDados: React.FC = () => {

return (
    <IonTabs>
        <IonTabBar slot='bottom'>
            <IonTabButton tab="Dados" href="/app/data/dataGeral">
                <IonIcon icon={pieChart}/>
                <IonLabel>Dados</IonLabel>
            </IonTabButton>
            <IonTabButton tab="Graficos" href="/app/data/graficos">
                <IonIcon icon={statsChart}/>
                <IonLabel>Gráficos</IonLabel>
            </IonTabButton>
            <IonTabButton tab="Relatorio" href="/app/data/relatorio">
                <IonIcon icon={speedometerOutline}/>
                <IonLabel>Indicadores</IonLabel>
            </IonTabButton>
        </IonTabBar>

        <IonRouterOutlet>
            <Route exact={true} path="/app/data/dataGeral" component={DadosGerais}/>
            <Route exact={true} path="/app/data/graficos" component={GraficosGeral}/>
            <Route exact={true} path="/app/data/relatorio" component={Relatorio}/>

            <Route exact path="/app/data">
                <Redirect to="/app/data/dataGeral"/>
            </Route>
        </IonRouterOutlet>
    </IonTabs>
);

};

export default SettingsDados;

graficos.tsx

import {
IonButtons,
IonContent,
IonHeader,
IonItem,
IonList,
IonMenuButton,
IonPage,
IonTitle,
IonToolbar,
} from “@ionic/react”;
import React from “react”;
import BarChartGeral from “…/ChartsGerais/BarChartGeral”;
import BarChartCategoriaEconomica from “…/ChartsGerais/BarCharts”;

const GraficosGeral: React.FC = () => {
return (


<IonToolbar color={“primary”}>



Gráficos



<IonToolbar
className=“ion-no-padding ion-text-center”
color={“secondary”}>
Despesas





);
};

export default GraficosGeral;

barchart.tsx

import React, { useEffect, useState } from “react”;
import axios from “axios”;
import { IonLabel, IonPage } from “@ionic/react”;
import { Bar } from “react-chartjs-2”;
import { ChartOptions } from “chart.js”;

const BarChartCategoriaEconomica = () => {
const [expenseData, setExpenseData] = useState<any>();
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
const fetchDataDespesa = async () => {
try {
const response = await axios.get(
https://ptn.saojoaodelrei.mg.gov.br/api/relatorios/despesa?unidade_gestora=1&exercicio=2023
);
if (response.data.resultado?.despesas) {
setExpenseData(response.data.resultado.despesas);
} else {
console.error(“Invalid response data format:”, response.data);
}
setIsLoading(false);
} catch (error) {
console.error(“Error fetching data:”, error);
setIsLoading(false);
}
};
fetchDataDespesa();
}, );

const categoriaEconomicaToValuesMap: Record<
string,
{ emp: number; liqu: number; pag: number }

= {};

expenseData.forEach((expense) => {
const categoriaEconomica = expense.dadosPrincipais.categoriaEconomica;
const empenhoData = expense.empenhoESubempenhos[0];
if (empenhoData) {
if (!categoriaEconomicaToValuesMap[categoriaEconomica]) {
categoriaEconomicaToValuesMap[categoriaEconomica] = { emp: 0, liqu: 0, pag: 0 };
}
categoriaEconomicaToValuesMap[categoriaEconomica].emp += parseFloat(
empenhoData.valorEmpenhado || 0
);
categoriaEconomicaToValuesMap[categoriaEconomica].liqu += parseFloat(
empenhoData.valorLiquidado || 0
);
categoriaEconomicaToValuesMap[categoriaEconomica].pag += parseFloat(empenhoData.valorPago || 0);
//console.log(categoriaEconomicaToValuesMap)
}
});

const categoriaEconomicaLabels = Object.keys(categoriaEconomicaToValuesMap);
const empValues = categoriaEconomicaLabels.map(
(categoriaEconomica) => categoriaEconomicaToValuesMap[categoriaEconomica].emp
);
const liquValues = categoriaEconomicaLabels.map(
(categoriaEconomica) => categoriaEconomicaToValuesMap[categoriaEconomica].liqu
);
const pagValues = categoriaEconomicaLabels.map(
(categoriaEconomica) => categoriaEconomicaToValuesMap[categoriaEconomica].pag
);
// Modify the categoriaEconomicaLabels array to extract the first 10 characters from each label
const shortenedcategoriaEconomicaLabels = categoriaEconomicaLabels.map((categoriaEconomica) =>
categoriaEconomica.substring(0, 10)
);
const fullcategoriaEconomicaLabels = categoriaEconomicaLabels;

const data = {
labels: shortenedcategoriaEconomicaLabels,
datasets: [
{
label: “Valor Empenhado”,
data: empValues,
backgroundColor: “rgba(255, 99, 132, 0.2)”,
borderColor: “rgb(255, 99, 132)”,
borderWidth: 1,
},
{
label: “Valor Liquidado”,
data: liquValues,
backgroundColor: “rgba(255, 159, 64, 0.2)”,
borderColor: “rgb(255, 159, 64)”,
borderWidth: 1,
},
{
label: “Valor Pago”,
data: pagValues,
backgroundColor: “rgba(255, 205, 86, 0.2)”,
borderColor: “rgb(255, 205, 86)”,
borderWidth: 1,
},
],
};

const options: ChartOptions<“bar”> = {
indexAxis: “y”,
maintainAspectRatio: false,
plugins: {
tooltip: {
callbacks: {
label: (tooltipItem) => {
const dataIndex = tooltipItem.dataIndex;
const fullLabel = fullcategoriaEconomicaLabels[dataIndex];
return fullLabel;
},
},
},
legend: {
display: true,
},
},
scales: {
x: {
stacked: true,
grid: {
display: false,
},
},
y: {
stacked: true,
grid: {
display: false,
},
},
},
};

return (
<div className=“ion-padding” style={{ width: “100%”, height: “800px” }}>
{" “}
<IonLabel color={“secondary”} className=“ion-text-center”>
{” “}
Execução por Categoria Econômica{” "}



);
};

export default BarChartCategoriaEconomica;