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?

Sorry I can't help, but you might find JSX easier to understand at a glance — Aron
– Aron, Commented May 10, 2017 at 19:32

mpowell213 · Accepted Answer · 2017-05-10 21:49:21Z

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.

edited May 10, 2017 at 21:49

answered May 10, 2017 at 21:33

mpowell213

896 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React JS button not showing up

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related