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

Question

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 sufix like so:

                <Trans
                  t={t}
                  defaults="hello <1>%%cohortName%%</1> <2>%%jobName%%</2>"
                  tOptions={{
                    interpolation: {
                      prefix: "%%",
                      sufix: "%%",
                    },
                  }}
                  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.

Answer 1

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.