React JS nested conditions, unexpected error on .map()

Question

I'm trying to do nested conditionals to be rendered and one case would make me use .map()

renderClasses () {
        if (!this.state.classes.length) {
            console.log(this.state.userType)
            if (this.state.userType) return(<div>Add Class</div>)
            else return (<div>Join Class</div>)
        } else {
            return (<div>{
                this.state.classes.map((class) => {
                                             ^ unexpected token here 
                    <div>one class</div>
                })
            }</div>)
        }
    }

    render() {
        if (!this.state.isLogged) {
            return <Redirect to='/' />
        }
        return (
            <div>
                {
                    this.renderClasses()
                }
            </div>
        );
    }

Am i missing something? i tried wrapping everything into one <div> or maybe I understood it wrong? Thank you in advance

stackoverflow.com/questions/50329714/react-loop-within-a-loop — devserkan
– devserkan, Commented May 14, 2018 at 12:22

Tomasz Mularczyk · Accepted Answer · 2018-05-14 12:24:14Z

4

you do not return anything:

this.state.classes.map((item) => {
   <div>one class</div>
})

try to paste return statement

this.state.classes.map((item) => {
   return <div>one class</div>
})

But the error is cause by class being a reserved keyword, try to name it like item.

answered May 14, 2018 at 12:24

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

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

3 Comments

TPHughes Over a year ago

This is right. It's worth noting that return is only required with the curley braces. So for example, both of these would return a div. .map(class => <div>One class</div>) and .map(class => { return <div>One class</div> })

adv Over a year ago

i forgot about this, thank you for reminding about reserved keywords!

Tomasz Mularczyk Over a year ago

@adv I'm glad it works. If I helped please upvote or accept the answer :)

Rishikesh Dhokare · Accepted Answer · 2018-05-14 12:26:49Z

1

If you use {} in map function you need to use return as well. If its just a single statement, just ignore {}. You can use this -

this.state.classes.map(class => <div>one class</div>)

answered May 14, 2018 at 12:26

Rishikesh Dhokare

3,58727 silver badges35 bronze badges

Comments

Aniruddh Agarwal · Accepted Answer · 2018-05-14 12:25:06Z

You should try returning from the map like this:

renderClasses () {
        if (!this.state.classes.length) {
            console.log(this.state.userType)
            if (this.state.userType) return(<div>Add Class</div>)
            else return (<div>Join Class</div>)
        } else {
            return (<div>{
                this.state.classes.map((class, index) => {
                    return (<div key={index}>one {class}</div>)
                })
            }</div>)
        }
    }

    render() {
        if (!this.state.isLogged) {
            return <Redirect to='/' />
        }
        return (
            <div>
                {
                    this.renderClasses()
                }
            </div>
        );
    }

Collectives™ on Stack Overflow

React JS nested conditions, unexpected error on .map()

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related