MUI ToggleButtonGroup don't render first tab component

Question

I have ToggleButtonGroup inside ToggleButtonGroup from MUI. In first picture You can see Tab "USTAWIENIA" which has inside "PARAMETRY GRANICZNE" and "CYKL PRZEGLĄDOWY" tabs. First one is underlined so it has class Mui-selected but it does not render component I have this lower ToggleButtonGroup inside Switch component.

<TrainsGlobalToolbar />
            <TrainsSettingsContentWrapper>
                <TrainsSettingsToolbarWrapper>
                    <StyledName>{settingsTxt}</StyledName>
                    <ToggleButtonGroupStyled
                        value={alignment}
                        exclusive
                        onChange={handleAlignment}
                        color="warning"
                    >
                        <ToggleButtonStyled
                            aria-label={marginParametersTxt}
                            onClick={() => handleGoToMarginParameters()}
                            value={'/trains-settings/margin-parameters'}
                        >
                            {marginParametersTxt}
                        </ToggleButtonStyled>
                        <ToggleButtonStyled
                            aria-label={reviewCycleTxt}
                            onClick={() => handleGoToMaintenanceCycle()}
                            value={'/trains-settings/review-cycle'}
                        >
                            {reviewCycleTxt}
                        </ToggleButtonStyled>
                    </ToggleButtonGroupStyled>
                    <StyledHistoryChangesContent>
                        <HistoryClockIcon />
                        <StyledText>{historyChangesTxt}</StyledText>
                    </StyledHistoryChangesContent>
                </TrainsSettingsToolbarWrapper>
                <StyledLineBreak />
                <Switch>
                    <Route
                        exact
                        path={Routes.TrainsSettingsMarginParameters.path}
                    >
                        <TrainsTresholdParametersList columns={columns} />
                    </Route>
                    <Route exact path={Routes.TrainsSettingsReviewCycle.path}>
                        <TrainSettingsReviewCycle />
                    </Route>
                </Switch>
            </TrainsSettingsContentWrapper>

When I console.log table API it looks like initially it's not rendered when attached screen loads, it appears when I click the "Parametry Graniczne" button. Can You please suggest how to make loads with first screen render ?

thanks

Answer 1

What is the current route the first time you display this page ? Because if it's not exactly the value of Routes.TrainsSettingsMarginParameters.path the content will be empty.

I believe your handleGoToMarginParameters function redirect the route to the correct one, that's why the content appear when you click on it.

You could add a useEffect that check the current route and redirect to default if it's not a predefined one.