What is wrong with syntax of this react render function?

Question

I'm writing a react component that renders a bootstrap carousel. I'm getting syntax warnings in my render function and for the life of me I cant figure out why.

   render: function() {
        var seconds = Math.floor(new Date().getTime() / 1000);
        return (
            <div id={'#'+this.state.carouselId+seconds} className="react-carousel carousel slide">
                <ol className="carousel-indicators">
                    {
                        this.state.config.slides.map(function(slide,i) {
                            var active = i == this.state.config.activeSlide ? 'active' : '';
                            return <li data-target={'#'+this.state.carouselId+seconds} data-slide-to={i} className={active} />
                        }.bind(this))
                    }
                </ol>
                <div className="carousel-inner">
                    {
                        this.state.config.slides.map(function(slide,i) {
                            var active = i == this.state.config.activeSlide ? 'item active' : 'item';
                            return (
                                <div className={active}>
                                    <img src={slide.url} className="img-responsive"/>
                                    {
                                        if(slide.caption.text!==''){
                                           return(
                                              <div class="container">
                                                 <div class="carousel-caption">
                                                    <h1>Welcome to your property profile!</h1>
                                                 </div>
                                              </div>
                                           )
                                        }
                                    }
                                </div>
                            )
                        }.bind(this))
                    }
                </div>
                <a className="left carousel-control" href={'#'+this.state.carouselId+seconds} data-slide="prev">
                    <span className="icon-prev" />
                </a>
                <a className="right carousel-control" href={'#'+this.state.carouselId+seconds} data-slide="next">
                    <span className="icon-next" />
                </a>
            </div>
        );
    },

Php storm shows the issue starting here:

I actually plan to break the slide out into a separate component but Id really like to know why this syntax is wrong and how to fix it.

ctrlplusb · Accepted Answer · 2016-05-31 12:24:17Z

2

See the official documentation: https://facebook.github.io/react/tips/if-else-in-JSX.html

"if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction."

I usually use the following syntax for this type of problem:

{
   slide.caption.text !== '' &&
     <div class="container">
       ...
     </div>
}

edited May 31, 2016 at 12:24

answered May 31, 2016 at 12:07

ctrlplusb

13.2k7 gold badges58 silver badges57 bronze badges

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

2 Comments

Wesley Smith Over a year ago

I missed that bit thanks, but your suggested edit also causes a syntax error. See prntscr.com/baktja, any ideas?

Wesley Smith Over a year ago

Ah, yep, didnt even see that :)

Collectives™ on Stack Overflow

What is wrong with syntax of this react render function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related