Ternary expression translation with i18next react js-CodePudding

I am new to react js. I want to create keys for the texts in the ternary expression.

import {useTransaltion} from "react-i18next"
function dummy(){
const {t} = useTranslation();
<Typography color="white" variant="h4">
    {restartLoading ? <LinearProgress /> : "Restart"}
</Typography>

how can I translate "Restart" .. because the following code gives me an error:

<Typography color="white" variant="h4">
    {restartLoading ? <LinearProgress /> : {t("Restart")}}
</Typography>

{t("Restart")} : there is an error here: Identifier expected. thanks in advance.

CodePudding user response：

I read a documentation about react-i18next https://react.i18next.com/ The useTranslation is a hook like useState So use this : const { t, i18n } = useTranslation(); Not : const {t} = useTranslation(); And : Not : {t("Restart")} But use this : {t("Restart")} Because you must define tags : if(cond)? something</>:something

CodePudding user response：

You don't need to use curly braces again when you define one in the ternary inside of that you can use javascript as a normal single liner.

<Typography color="white" variant="h4">
    {restartLoading ? <LinearProgress /> : t("Restart")}
</Typography>