Use <Fragment> instead of <span> as root element ?

[robertu7]

[ryandrewjohnson]

@robermac so the only time the <span> should be added is when there's HTML markup detected in your translation. The reason for this is behind the scenes I use React's dangerouslySetInnerHTML to render HTML.

I've looked into adding the dangerouslySetInnerHTML as a prop on the <Fragment> component, but unfortunately at the time of this writing that isn't possible. This means I'm still stuck using a valid HTML element - hence the <span>.

See the Have Fragments support dangerouslySetInnerHTML on react's open issue

I'll keep an eye on the above issue, and if they ever add dangerouslySetInnerHTML support to Fragment I'll update on my end.

[guicara]

Hello,

Any update on this?
It will be really great to remove this <span>!

In the meantime, I override the initialize renderInnerHtml option for translation (set to false), then use ReactHtmlParser:

import ReactHtmlParser from 'react-html-parser';
const title = ReactHtmlParser(this.props.translate('title_with_html', null, { renderInnerHtml: false }));

[ryandrewjohnson]

I'd have a look at the convo happening in #134 as it's related to this. In terms of this issue though I believe the initial issue stands where a Fragment element doesn't support the dangerouslySetInnerHTML property