Реагировать на вложенные условия JS, неожиданная ошибка в .map ()

Question

Я пытаюсь сделать вложенные условные выражения для рендеринга, и один случай заставил бы меня использовать .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>
        );
    }

Я что-то упустил?я попытался обернуть все в один <div> или, может быть, я неправильно понял?Заранее спасибо

Answer 1

Вы должны попытаться вернуться с карты так:

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

Answer 2

Если вы используете {} в функции map, вам также необходимо использовать return. Если это всего лишь одно утверждение, просто игнорируйте {}. Вы можете использовать это -

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

Answer 3

вы ничего не возвращаете:

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

попытайтесь вставить return оператор

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

Но ошибка вызвана тем, что class является зарезервированным ключевым словом, попробуйте назвать его как item.