Rid of repeated spans in React.js?

Question

React renders multiple spans, only with the actual value. Any advice on how to fix this:

And if it matter, the name of the user isn't suppose to be in a span, but as innerHTML of ".chatUser"

The actual render method is short:

createShortUsername: function() {
 // shortName is first two letter of first name. 
 var shortName = this.props.userName.split(" ")[0].slice(0, 2);
 console.log(shortName);
 return shortName;
},
render: function() {
 return (
   <div className="chatUser"> {this.createShortUsername()} </div>
 );
}

Thanks!

Answer 1

As suggested by @ivarni, the extra spans were caused by white spaces!

To prevent this write your code without white spaces around the braced expressions.

<ReactElement>{noRoomForWhiteSpace}</ReactElement>