CODEWITHSUNDEEP
javascriptreactjsi18nextreact-i18next
RyanP13
RyanP13

Reputation: 7753

Error in <Trans /> component with react-i18next: Nothing returned from render

When I try to interpolate some React components with the react-i18next Trans component I get the following error:

Uncaught Error: Trans(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

I am calling the Trans component like so:

<Trans
     t={l as TFunction}
     defaults="hello <chip>{{cohortName}}</chip> <bold>{{jobName}}</bold>"
     values={{
                cohortName,
                jobName,
     }}
     components={{
                chip: (
                  <Chip>
                    <></>
                  </Chip>
                ),
                bold: <strong />,
     }}
 />

I cannot see why this is a problem as according to the docs this should be ok.

I do not think the issue is with react-i18next Trans component but am not sure. Any ideas?

I have tried an alternative version where I use a template as the return value from the Trans component:

           <Trans
              t={t}
              defaults="hello <1>{{cohortName}}</1> <2>{{jobName}}</2>"
              values={{
                cohortName,
                jobName,
              }}
            >
              Hello <Chip>{{ cohortName }}</Chip>{" "}
              <strong>{{ jobName }}</strong>
            </Trans>

This throws:

Error: Objects are not valid as a React child (found: object with keys {cohortName}). If you meant to render a collection of children, use an array instead.

Which lead me to tray using an alternate prefix and suffix like so:

<Trans
     t={t}
     defaults="hello <1>%%cohortName%%</1> <2>%%jobName%%</2>"
     tOptions={{
                interpolation: {
                  prefix: "%%",
                  suffix: "%%",
                },
     }}
     values={{
                cohortName,
                jobName,
     }}
     >
     Hello <Chip>%%cohortName%%</Chip>{" "}
     <strong>%%jobName%%</strong>
 </Trans>

No errors thrown but the values cohortName & jobName are rendered as plain text and not the value from the component that <Trans /> is a child of.

Upvotes: 5

Views: 3072

Answers (2)

sKopheK
sKopheK

Reputation: 173

Trans component might be missing i18n instance it automatically obtains from I18nContext so you have to pass it to the component via i18n prop.

Updated code:

const { l, 18n } = useTranslation(...);

<Trans
     t={l as TFunction}
     i18n={i18n}
     defaults="hello <chip>{{cohortName}}</chip> <bold>{{jobName}}</bold>"
     values={{
                cohortName,
                jobName,
     }}
     components={{
                chip: (
                  <Chip>
                    <></>
                  </Chip>
                ),
                bold: <strong />,
     }}
 />

Upvotes: 1

nlta
nlta

Reputation: 1914

Objects are not valid react children:

                  Hello <Chip>{{ cohortName }}</Chip>{" "}
                  <strong>{{ jobName }}</strong>

Remember { } inside JSX is an escape into javascript. So {{ cohortName }} is just evaluating { cohortName } which is shorthand for {'cohortName': cohortName } which is an object.

And objects are not valid react children. You probably just want to render the string cohortName here {cohortName}

As for the "Nothing returned from render" error we'd have to see the Trans components source code to help there.

Upvotes: -1

Related Questions