如何在React列表中切换按钮？

import React, { Component } from 'react';

class ListWithToggleButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isButtonActive: false
    };
  }

  handleButtonClick = () => {
    this.setState({ isButtonActive: !this.state.isButtonActive });
  }

  render() {
    const { isButtonActive } = this.state;
    const buttonStyle = isButtonActive ? 'active' : 'inactive';
    const buttonText = isButtonActive ? 'Active' : 'Inactive';

    return (
      <div>
        <ul>
          {this.props.items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
        <button className={buttonStyle} onClick={this.handleButtonClick}>
          {buttonText}
        </button>
      </div>
    );
  }
}

export default ListWithToggleButton;