ReactJs if else in render

Question

Having some weird situation at least weird for me. I'm building timeline component so far so good. In case user timeline is empty i want to render different react class Here a portion of the code i did

var Timeline = React.createClass({
getInitialState: function() {
    return {
        data: [],
        page: 0,
        loadingFlag: false
    }
},
loadTimelineFromServer: function() {
    var nextPage = this.state.page + 1;
    var url = this.props.url + '?page=' + nextPage;
    $.ajax({
        url: url,
        dataType: 'json',
        cache: true,
        success: function(response) {
            if (this.isMounted()) {
                this.setState({
                    data: this.state.data.concat(response.data),
                    loadingFlag: false,
                    page: nextPage
                });
            }
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
        }.bind(this)
    });
},
componentDidMount: function() {
    this.loadTimelineFromServer();
},
render: function() {
    var items = this.state.data;
    var renderer;
    if (items.length) {
        renderer = <TimelineList data=items />
    } else {
        renderer = <EmptyTimeline />
    }

    return (
        <div>
        {renderer}
        </div>
    );
} 
});

EDIT : the error fired from firebug Error: Parse Error: Line 71: JSX value should be either an expression or a quoted JSX text at http://qfriends.dev/js/components/socialnetwork/user_timeline.js:71:20 ...pointing to this <TimelineList data=items />

worth mentioning i followed steps from reactjs docs page facebook.github.io/react/tips/if-else-in-JSX.html — Marcel Djaman
– Marcel Djaman, Commented Jun 24, 2015 at 11:47
What's not working? Do you see anything at all? Do you get any errors? A bit more information would be helpful. — tobiasandersen
– tobiasandersen, Commented Jun 24, 2015 at 11:55

Alexandre Kirszenberg · Accepted Answer · 2015-06-24 12:01:37Z

2

<TimelineList data=items /> is not valid JSX. You should use curly braces to pass a javascript expression as a prop: <TimelineList data={items} />.

answered Jun 24, 2015 at 12:01

Alexandre Kirszenberg

36.4k10 gold badges93 silver badges72 bronze badges

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

1 Comment

Marcel Djaman Over a year ago

Thanks i almost forgot about this rule! U saved my day :)

tobiasandersen · Accepted Answer · 2015-06-24 11:49:55Z

0

You should add either a semicolon to the end:

if (items.length) {
    renderer = <TimelineList data=items />;
} else {
    renderer = <EmptyTimeline />;
}

or do it like this:

if (items.length) {
    renderer = (
        <TimelineList data=items />
    );
} else {
    renderer = (
        <EmptyTimeline />
    );
}

answered Jun 24, 2015 at 11:49

tobiasandersen

8,6783 gold badges32 silver badges40 bronze badges

1 Comment

Marcel Djaman Over a year ago

thanks for your time sir! Really appreciate the efforts

Collectives™ on Stack Overflow

ReactJs if else in render

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related