NOTA : ¡Cambié el enlace de la caja de arena al código de trabajo con algunas notas sobre lo que tenía antes que no funcionaba correctamente!

Sin embargo, todavía me pregunto si el código en la parte inferior es redundante.

https://codesandbox.io/embed/sharp-satoshi-pgj5f?fontsize=14&hidenavigation=1&theme=dark

Muy bien, esta vez agregué una URL a un espacio aislado con la idea básica de lo que está sucediendo.

Tengo un archivo JS de componentes con estilo con un botón que estoy tratando de alternar el color de fondo para onClick pasando valores prop para el color, y tener un booleano adjunto para que luego pueda agregar datos API para mostrar en función de la verdadera o estado falso .

Actualmente, con la forma en que está codificado, el primer clic siempre imprime el estado falso inicial, en lugar de cambiar inmediatamente a verdadero

Además, en mi código original, tengo un botón para DÍA, SEMANA, MES para alternar un gráfico que muestra datos durante esos períodos de tiempo si su botón respectivo devuelve verdadero :

 <ButtonContainer> <Button onClick={onClickDay} background={buttonColorDay} color={colorDay}>Day</Button> <Button onClick={onClickWeek} background={buttonColorWeek} color={colorWeek}>Week</Button> <Button onClick={onClickMonth} background={buttonColorMonth} color={colorMonth}>Month</Button> </ButtonContainer>

La parte superior derecha de la imagen es lo que estoy tratando de emular:

Cada uno de esos botones tiene su propio conjunto de 3 useStates y su propio onClick al igual que el único botón en el entorno limitado. ¿Es eso redundante o está bien?

 const [clickedDay, setClickedDay] = useState(false); const [clickedWeek, setClickedWeek] = useState(false); const [clickedMonth, setClickedMonth] = useState(false); const [buttonColorDay, setButtonColorDay] = useState('lightgray'); const [buttonColorWeek, setButtonColorWeek] = useState('lightgray'); const [buttonColorMonth, setButtonColorMonth] = useState('lightgray'); const [colorDay, setColorDay] = useState('gray'); const [colorWeek, setColorWeek] = useState('gray'); const [colorMonth, setColorMonth] = useState('gray'); const onClickDay = () => { ... } const onClickWeek = () => { ... } const onClickMonth = () => { ... }

Por ahora, no me preocupa que los otros botones cambien a falso cuando uno cambia a verdadero , solo quiero que los botones funcionen correctamente.

@__@