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

Answer 1

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.

Answer 2

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