React JS / JSX if statement in loop

Question

I really have problems understanding React logic. Why is this IF not working? You can assume that there are all classes, and the loop also works. Well, even the condition seems to work, but the output on my page is still empty .....

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

Please help me because I really don't understand him

Answer 1

You are not using .mapcorrectly. It converts each element to your array and returns a new array. You want to save this array and show it, and not save the variable inside the conversion 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>
        );
    }
});