Translation into react nodes

Instead of a translation like in this basic example

{
    "key": "{{what}} is {{how}}"
}

i18next.t('key', { what: 'i18next', how: 'great' });
// -> "i18next is great"

I need a result like

<i>i18next</i> is <i>great</i>

as a react node to be rendered as

i18next is great

I could generate the string "<i>i18next</i> is <i>great</i>" and use it with dangerouslySetInnerHTML, but that’s ugly and dangerous.

I could split the key like

{
    "key1": "{{what}}",
    "key2": "is",
    "key3": "{{how}},
}

and use

const params = { what: 'i18next', how: 'great' };
return <>
   <i>{i18next.t('key1', params)}</i>
   {i18next.t('key2', params);}
   <i>{i18next.t('key3', params)}</i>
<>

which is safe, but even uglier. Moreover, in general, it requires to split every key with n arguments into 2*n+1 parts, which are related by nothing but a naming convention.

We’d like to apply some formatting (not necessarily <i>; this was just an example) to all parameters, so we need a better solution. I’m not looking for a library, i18next was just an example. Any idea?

Source: ReactJs