通过列表映射后的React切换按钮

import React, { useState } from 'react';

const ToggleButton = ({ items }) => {
  const [activeIndex, setActiveIndex] = useState(null);

  const toggleButton = (index) => {
    setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
  };

  return (
    <div>
      {items.map((item, index) => (
        <button
          key={index}
          onClick={() => toggleButton(index)}
          style={{ backgroundColor: activeIndex === index ? 'blue' : 'grey', color: 'white' }}
        >
          {item}
        </button>
      ))}
    </div>
  );
};

const App = () => {
  const items = ['Option 1', 'Option 2', 'Option 3'];

  return (
    <div>
      <h1>Toggle Buttons Example</h1>
      <ToggleButton items={items} />
    </div>
  );
};

export default App;