Question

35

How to output text in ReactJS without wrapping it in span

rated 0 times [ 36] [ 1] / answers: 1 / hits: 32853 / 10 Years ago, sat, june 28, 2014, 12:00:00

In my ReactJS-based application I do:

var _ = React.DOM;

_.span(null, 'some text', _.select(null, ...));

The problem is: 'some text' is wrapped in additional span element in the DOM. Is there any way to avoid this behavior and just output raw text?

To be clear: I want to output

<span>some text<select>...</select></span>

not

<span><span>some text</span><select>...</select></span>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eliasf

Add To Favorites

Follow

Total Points: 703

Total Questions: 97

Total Answers: 129

Location: Chad

Member since Tue, Apr 27, 2021

3 Years ago

answered 10 Years ago taylert · Accepted Answer

Update: This is now fixed in React v15 (2016-04-06) – now comment nodes are added around each piece of text, but it is no longer wrapped in a <span> tag.

We received some amazing contributions from the community in this release, and we would like to highlight this pull request by Michael Wiencek in particular. Thanks to Michael’s work, React 15 no longer emits extra <span> nodes around the text, making the DOM output much cleaner. This was a longstanding annoyance for React users so it’s exciting to accept this as an outside contribution.

Full release notes.

This is currently a technical limitation of React; it wraps any floating text nodes in a span so that it can assign it an ID and refer back to it later. In a future version of React hopefully we can remove this restriction.