CODEWITHSUNDEEP
reactjsjsx
jhamm
jhamm

Reputation: 25062

What does React turn my text into lots of <span>'s?

I have a string that I am displaying using React/JSX. I am using version 0.14.7 Here is the String

renderValue(bus) {
    let busDisplay = `(${bus.busIdCode })`;
    return (
            <span>{`${bus.country} ${busDisplay}`}</span>
    )
}

When I look in the dom, all of the text is broken apart into separate <span />'s, even the parenthesis. Here is the result:

<div>
  <div>
  <span>
    <span>
      <span>Aruba</span>
      <span> (</span>
      <span>ABW001</span>
      <span>)</span>
    </span>
  </span>
</div>

How can I make all the text a single <span /> and get rid of this pollution in the dom?

Upvotes: 0

Views: 499

Answers (1)

Andy Ray
Andy Ray

Reputation: 32076

There's no problems here, that's probably just how React used to render text nodes. It doesn't matter at all, it's just a disposable DOM render artifact. Current versions of React appear to render text in a different way.

If you want to avoid additional spans, use the current version of React. You're currently 15 major releases behind.

Upvotes: 2

Related Questions