Estoy tratando de construir una placa de sonido. Me cuesta entender cómo seleccionar un índice para cambiar el color de mi botón, ya que actualmente está cambiando todos los botones, pero quiero cambiar solo uno.
$isActive se pasa arriba en una composición con estilo como esta:
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> ) };SetIsActive no devuelve un valor, por lo que ButtonColorChange no estará definido. Si establece IsActive en el índice que está activo, luego puede comparar el índice de baseData.map con el índice isActive y cuando coincidan, ese es el botón para resaltar.
// change this const ButtonColorChange = SetIsActive(!isActive); // to this SetIsActive(index); // ... then change this return <Button key={index} $isActive={isActive} onClick={() => handleClick(beat.src,index)}>{beat.title}</Button> // to this return <Button key={index} $isActive={index === isActive} onClick={() => handleClick(beat.src,index)}>{beat.title}</Button>