React JS button not showing up

Question

I am developing a React demo app and I have this component:

var MediaList = React.createClass({
displayName: 'MediaList',
getInitialState: function() {
    return {
        tweets: getTweets(numTweets)
    };
},
render: function() {
    var tweets = [];
    for (var i = 0; i < this.props.tweets.length; i++) {
        var tweet = this.props.tweets[i];
        tweets.push({
            key: tweet.id,
            avatar: tweet.avatar,
            name: tweet.name,
            text: tweet.text,
            favorites: tweet.favorites,
            retweets: tweet.retweets
        });
    };
    return (React.DOM.div(
        React.DOM.button({
            onClick: this.
            changeAllTweets
        }, " Change all tweets "),
        React.DOM.button({
            onClick: this.
            changeRandomTweet
        }, " Change one tweet "),
        React.DOM.div({
                className: "tweets-list"
            },
            React.DOM.h2(null, tweets.length, " tweets ", React.DOM.small(null, "Update rate ", interval, " seconds")),
            React.DOM.ul({
                    className: "media-list"
                },
                this.state.tweets.sort(function(a, b) {
                    return calculateRating(b) - calculateRating(a);
                }).map(renderRow)
            )
        )
    ));
},
changeAllTweets: function() {
    var getTweetData = function() {
        var nameStart = _.random(loremLen - 12);
        return {
            avatar: "http://playground.ahrengot.com/tweets/img/" + _.random(1, 6) + ".jpg",
            name: lorem.substring(nameStart, _.random(nameStart + 5, nameStart + 12)),
            text: lorem.substring(0, _.random(90, 140)),
            favorites: _.random(0, 2000),
            retweets: _.random(0, 500)
        };
    };
    var tweets = [];
    for (var i = 0; i < num; i++) {
        var data = getTweetData();
        data.id = i;
        tweets.push(data);
    };
    this.setState({
        tweets: tweets
    });
},
changeRandomTweet: function() {
    var tweets = this.state.tweets;
    var randPosition = _.random(0, numTweets - 1);
    tweets[randPosition].favorties = _.random(0, 5000);
    tweets[randPosition].retweets = _.random(0, 1250);
    this.setState({
        tweets: tweets
    });
}});

What I am confused about is that one of the buttons as well as the div with tweet list inside gets rendered, but the first button(Change all tweets) isn't. What could possibly be wrong here?

Answer 1

You need to pass null as the first argument to React.DOM.div.

React.DOM.div( null,
   React.DOM.button({ ... })

That being said, you should look into using JSX. It will be much easier to write, read, and debug.