Tengo esta función en React para cambiar el color de los botones. Pero cambia todos los botones y no solo uno individual. ¿Cómo puedo hacer eso?
function changeButtonColor() { setNumbersColor(numbersColor === 'green' ? 'red' : 'green'); } const [numbersColor, setNumbersColor] = useState('green'); return ( <NumbersContainer> {numbersList.map((num) => ( <Numbers key={num} style={{ backgroundColor: numbersColor }} onClick={changeButtonColor} > {formatNumber(num)} </Numbers> ))} </NumbersContainer> )Puede refactorizar el componente de números por sí mismo y hacerlo responsable de sus propios colores.
import React from "react" const Button = (props) => { const [numbersColor, setNumbersColor] = useState("green") const changeButtonColor = ()=>{ setNumbersColor(numbersColor === 'green' ? 'red' : 'green') } return( <button style={{ backgroundColor: numbersColor }} onClick={changeButtonColor} > {props.children} </button> ) } const NumbersList = () => { return ( <NumbersContainer> {numbersList.map((num) => ( <Button key={num}> {formatNumber(num)} </Button> ))} </NumbersContainer> ) }