I have this function in React to change the buttons' color. But it changes all buttons and not just an individual one. How can I do that?
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>
)
You can refactor the numbers component by it self, and make it responsible for it's own colors
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>
)
}