React JS/JSX if statement in loop

Question

I am having issues understanding the React logic. Why is this IF not working? You can assume all classes are there and also the loop is working. Even the condition seem to work but the output on my page is still blank.

    var Feature = React.createClass({
    componentDidMount: function(){
        $('input.rating[type=number]').rating();
        initFeatureInstallReady(this.props.feature.feature_id);
    },
    render: function(){

        var backgroundColor = "white";
        var item;
        var props = this.props;

        this.props.feature.slides.map(function(slide, i){

            if(props.feature.feature_id == "start-home-away" && slide.slide_id == 'review'){

                item = <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureReviewHomeAway feature={props.feature} slide={slide} />
                        </div>;

            }else if(props.feature.feature_id == "start-goto-sleep" && slide.slide_id == 'review'){

                item = <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureReviewHomeAway feature={props.feature} slide={slide} />
                        </div>;

            }else{

                item = <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureMain_Step feature={props.feature} slide={slide} />
                        </div>;
            }

        });

        return (
            <div className="carousel slide carousel-feature" data-ride="" data-interval="false" id={this.props.feature.feature_id}>
                <div className="carousel-inner" role="listbox" style={{backgroundColor: backgroundColor}}>
                    {item}
                </div>
            </div>
        );
    }
});

What am I missing?

You're using map but the thing you're trying to render is called item-- is item supposed to be 1 element or an array of elements? — Jim Skerritt
– Jim Skerritt, Commented Sep 2, 2015 at 17:57

Jeff Fairley · Accepted Answer · 2015-09-02 18:03:55Z

You're not using .map correctly. It will transform each element in your array, and return a new array. You want to save that array, and show it, not save a variable inside the transform function.

var Feature = React.createClass({
    componentDidMount: function(){
        $('input.rating[type=number]').rating();
        initFeatureInstallReady(this.props.feature.feature_id);
    },
    render: function(){

        var backgroundColor = "white";
        var props = this.props;

        // convert each slide into a <div> in a brand new array
        //// `.map` will create a new array full of divs
        var items = this.props.feature.slides.map(function(slide, i){

            if(props.feature.feature_id == "start-home-away" && slide.slide_id == 'review'){
                // return this slide converted to a <div>
                return <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureReviewHomeAway feature={props.feature} slide={slide} />
                        </div>;

            }else if(props.feature.feature_id == "start-goto-sleep" && slide.slide_id == 'review'){
                // return this slide converted to a <div>
                return <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureReviewHomeAway feature={props.feature} slide={slide} />
                        </div>;

            }else{
                // return this slide converted to a <div>
                return <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureMain_Step feature={props.feature} slide={slide} />
                        </div>;
            }

        });

        return (
            <div className="carousel slide carousel-feature" data-ride="" data-interval="false" id={this.props.feature.feature_id}>
                <div className="carousel-inner" role="listbox" style={{backgroundColor: backgroundColor}}>
                    {items}
                </div>
            </div>
        );
    }
});

Yes thats it idd. Logic but not logic somehow :) Thanks for clearing it up!

Collectives™ on Stack Overflow

React JS/JSX if statement in loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related