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?

Answer 1

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>
        );
    }
});