¿Cómo cambiar la clase CSS entre los botones representados con map()?

Podemos cambiar el color de un botón cuando se hace clic en él, y también cambiar el color del botón previamente seleccionado a su color original inicial usando la función map().

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: En el siguiente ejemplo, hemos almacenado el nombre del botón actualmente seleccionado (o algún ID) en el estado.

Nombre de archivo: App.js

import React, { useState } from "react";
  
const App = () => {
  const menuItems = ["Easy", "Medium", "Hard"];
  const [activeButton, setActiveButton] = useState("");
  
  return (
    <div>
      {menuItems.map((level, idx) => {
        return (
          <button
            key={level}
            onClick={() => {
              setActiveButton(level);
            }}
            style={{
              backgroundColor: activeButton === level ? "lightblue" : ""
            }}
          >
            {level}
          </button>
        );
      })}
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción: 

Color Cambia entre el botón al hacer clic

Nota: Una cosa que debemos cuidar es nombrar los botones de manera diferente. Además, una forma más alentadora de hacer esto es usar ID para botones como se muestra a continuación:

const menuItems = [{id:1, name:"Easy"}, 
                        {id:2, name:"Medium"}, 
                        {id:3, name:"Hard"}]