React组件返回映射项的列表，然后消失

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showList: true // 控制映射项列表的显示与隐藏
    };
  }

  toggleList = () => {
    this.setState(prevState => ({
      showList: !prevState.showList
    }));
  }

  render() {
    const data = [1, 2, 3, 4, 5]; // 假设这是映射项的数据

    return (
      <div>
        <button onClick={this.toggleList}>Toggle List</button>
        {this.state.showList && (
          <ul>
            {data.map(item => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        )}
      </div>
    );
  }
}

export default MyComponent;