Estoy trabajando en un proyecto en el que asigné una lista de números del 1 al 90 y devolví un botón para cada número, por lo que cuando hago clic en un botón en particular, el color cambia y cuando hago clic nuevamente, el color desaparece. Entonces, aquí está mi problema: necesito agregar el número en ese botón a una lista cuando se hace clic en el botón y el color cambia, luego eliminarlo de la lista cuando se vuelve a hacer clic en el botón y el color vuelve a la normalidad. Esta es la base de código de lo que hice para agregar colores al botón cuando se hizo clic y eliminar color cuando se hizo clic nuevamente.
import React from 'react'; import './style.css'; export default function App() { const [activeNums, setActiveNums] = React.useState({}); let nums = [] for (let i = 1; i < 91; i++) { nums.push(i) } const onToggle = (num) => { setActiveNums((state) => { return { ...state, [num]: !state[num], }; }); }; return ( <div> {nums.map(i => { return <button key={i} name={!activeNums[i] && 'ready'} onClick={(e) => handleClass(i, e)} className={`${activeNums[i] ? 'game_clicked' : ''} game_btn `}>{i}</button> })} </div> ); }Entonces, según entiendo, desea tener botones, en los que hace clic/deshace clic y agrega el número de botón a algún objeto. Se puede hacer así:
// import React from "react"; const App = () => { const [activeNums, setActiveNums] = React.useState({}); const buttonHandler = ({ target: { name } }) => { setActiveNums({ ...activeNums, [name]: !activeNums[name] }); }; return ( <div> {[...Array(10)].map((_, idx) => { const number = idx + 1; return ( <button key={number} name={number} onClick={buttonHandler}> My number is: {number} <br />I am{" "} {activeNums["" + number] ? "" : "not"} ready. </button> ); })} <div>{JSON.stringify(activeNums)}</div> </div> ); }; // export default App; ReactDOM.render(<App />, document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>/* I think this is what you were going for, hope this helps - */ import React from "react"; import "./styles.css"; export default function App() { const [activeNums, setActiveNums] = React.useState([]); let nums = []; for (let i = 1; i < 91; i++) { nums.push(i); } const onToggle = (num) => { setActiveNums((prevState) => { if (prevState.includes(num)) { return [...prevState.filter((n) => n !== num)]; } else { return [...prevState, num]; } }); }; return ( <div> {nums.map((num) => { return ( <button key={num} onClick={(e) => onToggle(num)} className={activeNums.includes(num) ? "game_clicked" : ""} > {num} </button> ); })} </div> ); }