ReactJS: text-align justify not working

Question

I have been using text-align: justify to evenly distribute menus. Following this tutorial and it is working perfectly.

However, it breaks when I use ReactJS to create the view. A comparison can be found here: http://jsfiddle.net/j7pLprza/1/. I use these two simple components to populate the menus:

var MenuItem = React.createClass({
    render: function() {
        return (
            <li>
                {this.props.title}
            </li>
        );
    }
});

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return (<MenuItem title={menu.title} />);
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

After exploration, I think it is caused by ReactJS, which removes all line-break and white-space after <li> items. This will disable text-align: justify.

It happens for AngularJS as well (but I can fix it by using a add-space-all directive).

I reached only this issue after googling: https://github.com/facebook/jsx/issues/19. But I quickly got lost.

I tried to add some extra content, such as {'\n'} and {' '}, but ReactJS reports syntax errors.

Please help. Thanks.

---

UPDATE 1:

Following the accepted answer, my menus works in Chrome Emulator. However, when I visit from iPhone 5c (Chrome browser), the result is as if the extra space is not recognized.

After trying different combinations, this one works:

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return [(<MenuItem title={menu.title} />), '&nbsp; '];
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

Please be noted that the extra space in   is necessary. Missing either   or breaks it.

It works then on Nexus 7, iPhone 5c (Chrome and Safari). However, I do not know the exact reason. If anyone knows, please help.

---

UPDATE 2:

Still buggy. So I switched to Flex layout. And it is super easy. An example is: http://jsfiddle.net/j7pLprza/4/

Answer 1

React doesn't remove anything in this case, since there is no whitespace between elements in the first place. If you want to add whitespaces between the li elements, you can interleave the array with ' '. In this case it is as simple as returning an array from the .map function (arrays are flattened):

var TopMenus = React.createClass({
    render: function() {
        return (
            <div className="break">
            <nav>
                <ul>
                    {this.props.menus.map(function(menu) {
                        return [<MenuItem title={menu.title} />, ' '];
                    })}
                </ul>
            </nav>
            </div>
        );
    }
});

Example: https://jsfiddle.net/j7pLprza/2