i18next: Interpolation escapeValue : false ... not working?

@t7m thank you for posting your solution! I was also stuck and the documentation did not help at all.

If it helps anyone, none of the solutions to my problem were in any documentation, nor were they on this page. The solution for me was:

Translation text: Your search for <0>{{searchTerm}}</0> returned 0 results

The code:

            <Trans 
                i18nKey="CategoryPage.NoSearchResultsHeaderWithText"
                values={ { searchTerm : searchTerm } }
                components={ [<span className="entered-search">{searchTerm}</span>] }>
            </Trans>

The result is: Your search for <span class="entered-search">blorp</span> returned 0 results

All free to contribute to the documentation or code:

Still fact is:

            <Trans 
                i18nKey="CategoryPage.NoSearchResultsHeaderWithText"
                values={ { searchTerm : searchTerm } }
                components={ [<span className="entered-search">{searchTerm}</span>] }>
            </Trans>

is 100% the same as:

<Trans i18nKey="CategoryPage.NoSearchResultsHeaderWithText">
  Your search for <span className="entered-search">{{searchTerm}}</span> returned 0 results
</Trans>

Just the index of the child is different - so using <1> instead of <0> and all described https://react.i18next.com/latest/trans-component even how to get to the translation https://react.i18next.com/latest/trans-component#how-to-get-the-correct-translation-string and also the alternative @t7m uses: https://react.i18next.com/latest/trans-component#alternative-usage

But like said - OSS is about contributing

I’m not sure what you are saying that’s not needed. I just demonstrated the only way it works and you say something isn’t needed?

I don’t want …Your search for … in the Trans element because that text only belongs in the translation file.

If you have a different way than what I’ve demonstrated that works, I’d love to hear it. No one has provided it. I showed the answer that works, and you’re telling me something isn’t needed.

@Pontvs that’s not escaping that has to do with : been assigned to be the namespace separator, means:

t('Permission: Administrera rättigheter') gets interpreted as search the key Administrera rättigheter in the namespace: Permission

https://www.i18next.com/translation-function/essentials#accessing-keys-in-different-namespaces

setting nsSeparator: false on init will remove that detection of namespaces in keys passed in t function

well, like said - the “problem” is - react is safe by design…the only option is dangerously-set-inner-html…😄

Well it’s as clear as mud to me, sorry.

I guess I’ll find another way. Just wanted to substitute in some text.

Ok, so is there a solution other than dangerouslySet? Clearly I can’t be the only person ever who has wanted to put a span inside translatable text.

Also, I don’t think I can use dangerouslySet in conjunction with react-i18next. So I’m completely stumped here.

What’s “hard to understand” is that you have a translation that you set in i18nKey=“”, so then why do you need to also put the original text of the translation in the body too? It doesn’t make sense.

I have a translation file, and it has everything a translator needs to make the changes. So why am I also hard-coding the text in the trans element? Doesn’t that seem redundant?

Also, it looks like I’ll have to change my translation files to include <1> tags for some reason, and that’s always confusing for translators.

Those examples are simply too abstract. I have a concrete question about a given translation string… This text shows {1} that is a span with text. … and how to get the desired results. I guess it’s not possible. I guess I’m moving on.

I would love to use the Trans Component but the examples make no sense to me. I want to make

This text shows {1} that is a span with text. … with … This text shows <span>THIS TEXT</span> that is a span with text.

Can you please explain how to do this?

Like said -> the Trans component: https://react.i18next.com/components/trans-component