react使用Map方法遍历列表不显示的问题

问题：

在最开始搭建选项卡的时候，我的js代码是这样的

import React, { Component } from 'react'
import './css/02-maizuo.css'
export default class App extends Component {
    state = {
        list: [
            {
                id: 1,
                text: '电影'
            },
            {
                id: 2,
                text: '影院'
            }, {
                id: 3,
                text: '我的'
            },
 
        ],
        current: 0
    }
    render() {
        return (
            <div>
                <ul>
                    {this.state.list.map((item, index) => {
                        <li
                            key={item.id}
                            className={this.state.current === index ? 'active' : ''}
                            onClick={() => this.handleClick(index)}
                        >
                            {item.text}
                        </li>
                    })}
                </ul>
            </div>
        )
    }
    handleClick(index) {
        console.log(index);
        this.setState({
            current: index
        })
    }
}

有问题的部分：

终端有提示警告信息：

解决办法

 第一反应是这里不能使用map进行遍历数组，于是换成了forEach,但是foreach方法并不返回一个新的数组，而只是对原来的数组进行遍历。如果使用forEach遍历数组，此时没有返回任何JSX元素，因此