I am trying to build a Sound Board.
I’m having a hard time understanding how to select one index to change my button’s colour as currently it is changing all the buttons, but I want to change only one.
$isActive is passed above in a styled comp like this :
const Button = styled.button<{ $isActive?: boolean }>background: ${props => props.$isActive ? "linear-gradient(55deg, #ff00e1, #ffb9df,#ffb9df, #ff00cc);" : "black"};
export default function BassPlayer() {
const [activeSound, setActiveSound] = useState(null);
const [activeIndex, setActiveIndex] = useState(null);
const [isActive, SetIsActive] =useState(false);
const createSound = (beat: string) => {
return new Howl({
src: beat,
autoplay: false,
loop: false,
volume: 0.5
});
}
const handleClick = (beat: string, index: number ) => {
const ButtonColorChange = SetIsActive(!isActive);
if (activeSound) {
activeSound.stop();
}
if (activeIndex !== index) {
const newSound = createSound(beat);
newSound.play();
setActiveSound(newSound);
}
setActiveIndex(index);
};
return (
<Container>
<Title>Bass</Title>
<Grid>
{
bassData.map((beat, index: number) => {
return <Button key={index} $isActive={isActive} onClick={() => handleClick(beat.src,index)}>{beat.title}</Button>
})
}
</Grid>
</Container>
)
};