CODEWITHSUNDEEP
javascriptreactjs
charlesbxl
charlesbxl

Reputation: 85

minor error in if statement in render function

I have an error notification point at my if statement that checks if the length > 0. Not sure what the reason is for this? Think it must be a very stupid curly bracket or something but just can't see it...

render() {
    return (
        <DefaultLayout>
            <div className="innercircleboxes">
                {
                    if(this.state.friends.filter(friend => (this.state.innerCircle).includes(friend._id)).length > 0){ 
                        this.state.friends.filter(friend => (this.state.innerCircle).includes(friend._id)).map(inner =>
                        <div key={inner._id}>
                            <InnerCircleDetail 
                                key={inner._id}
                                id={inner._id}
                                username={inner.username}
                                location={inner.location}
                            />
                        </div>
                        )    
                    }    
                }
            </div>
        </div>

Upvotes: 0

Views: 41

Answers (1)

Giorgi Moniava
Giorgi Moniava

Reputation: 28654

You can't use if statements inside JSX. You must use expressions. Say the ternary operator

{a > b ? x : y}

Or in your case this would make more sense

{isTrue && <RenderMe/>}

Relevant link.

Upvotes: 3

Related Questions