Due to repeated intervals in React.js?

Question

React displays multiple intervals, only with the actual value. Any tips on how to fix this:

And if that matters, the username should not be in the span, but like innerHTML in .chatUser

The actual rendering 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, extra spaces were caused by spaces!

To avoid this, write your code without spaces around the brackets.

 <ReactElement>{noRoomForWhiteSpace}</ReactElement> 

Answer 2

In fact, some special characters (not visible in your editor) that penetrate the code. (Probably if you copied). For me it was \u2028 . Check the generated javascript file to see what extra characters are in the code. To get rid of it, you can delete the line that called it and type it again (as opposed to copy and paste).