JSX not producing expected output with SPAN nested in A

Question

I'm just starting to play with React, and am trying to re-create existing HTML output using React Components.

I'm not sure if this is a bug, or I'm doing something wrong, but the final HTML output is not what I'm expecting.

The issue is that the tab anchor text should not be wrapped in a span, only the following number.

Starting with this JSX:

/** @jsx React.DOM */;
var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <div>
          <ul>
            <li><a>Tab1 <span>3</span></a></li>
            <li><a>Tab2 <span>9</span></a></li>
            <li><a>Tab3 <span>5</span></a></li>
            <li><a>Tab4 <span>6</span></a></li>
          </ul>
        </div>
      </div>
    );
  }
});
React.renderComponent(MyComponent({}), document.body);

Which compiles into the following JS:

/** @jsx React.DOM */;
var MyComponent = React.createClass({displayName: 'MyComponent',
  render: function() {  
    return (
      React.DOM.div(null, 
        React.DOM.div(null, 
          React.DOM.ul(null, 
            React.DOM.li(null, React.DOM.a(null, "Tab1 ", React.DOM.span(null, "3"))),
            React.DOM.li(null, React.DOM.a(null, "Tab2 ", React.DOM.span(null, "9"))),
            React.DOM.li(null, React.DOM.a(null, "Tab3 ", React.DOM.span(null, "5"))),
            React.DOM.li(null, React.DOM.a(null, "Tab4 ", React.DOM.span(null, "6")))
          )
        )
      )
    );
  }
});
React.renderComponent(MyComponent({}), document.body);

Which then renders as the following HTML:

<div data-reactid=".r[1ajsn]">
  <div data-reactid=".r[1ajsn].[0]">
    <ul data-reactid=".r[1ajsn].[0].[0]">
      <li data-reactid=".r[1ajsn].[0].[0].[0]">
        <a data-reactid=".r[1ajsn].[0].[0].[0].[0]">
          <span data-reactid=".r[1ajsn].[0].[0].[0].[0].[0]">Tab1 </span>
          <span data-reactid=".r[1ajsn].[0].[0].[0].[0].[1]">3</span>
        </a>
      </li>
      <li data-reactid=".r[1ajsn].[0].[0].[1]">
        <a data-reactid=".r[1ajsn].[0].[0].[1].[0]">
          <span data-reactid=".r[1ajsn].[0].[0].[1].[0].[0]">Tab2 </span>
          <span data-reactid=".r[1ajsn].[0].[0].[1].[0].[1]">9</span>
        </a>
      </li>
      <li data-reactid=".r[1ajsn].[0].[0].[2]">
        <a data-reactid=".r[1ajsn].[0].[0].[2].[0]">
          <span data-reactid=".r[1ajsn].[0].[0].[2].[0].[0]">Tab3 </span>
          <span data-reactid=".r[1ajsn].[0].[0].[2].[0].[1]">5</span>
        </a>
      </li>
      <li data-reactid=".r[1ajsn].[0].[0].[3]">
        <a data-reactid=".r[1ajsn].[0].[0].[3].[0]">
          <span data-reactid=".r[1ajsn].[0].[0].[3].[0].[0]">Tab4 </span>
          <span data-reactid=".r[1ajsn].[0].[0].[3].[0].[1]">6</span>
        </a>
      </li>
    </ul>
  </div>
</div>

The javascript clearly shows the span as a child of the anchor, so I'm thinking it's probably a bug, but wanted to make sure I'm not doing something wrong.

Answer 1

Yes, this is currently a limitation in React; in order for it to do live updates it needs to give each text node an ID by wrapping it in a span.

I'm hoping to get rid of this problem sometime in the future.

Answer 2

You can always use className to identify specific elements. It seems the numbers are badges of some sort, so each span could have className="badge"