Soy nuevo con React y Next.js, estoy creando una línea de tiempo, la línea de tiempo tiene barras de colores que, si se presionan, la página muestra un div debajo con información sobre cada barra.
Logré que el contenido a continuación apareciera y desapareciera con useState hook para que el contenido de cada barra no se acumule, estoy usando una etiqueta animada "Sección" y solo la primera vez que presiono cualquier barra, el contenido está animado, el el resto aparece estáticamente, me pregunto si puedo usar algo como el gancho useEffect para volver a renderizar cada div de contenido para que la animación aparezca cada vez que haga clic en cada barra, también para borrar el último div cargado para que no se acumule en el navegador recuerdo, espero haberme explicado comencé con React hace 2 días, y gracias por su tiempo.
Ejemplo de código reducido:
//useState hook const [content, setContent] = useState(null); //Timeline section <div> <Bar1 onClick={() => setContent(BarContent_1)}/> <Bar2 onClick={() => setContent(BarContent_2)}/> </div> //Content display <div> {content} </div> //Content of each bar, (<Section> div has the animation) const BarContent_1 = () => { return ( <Section> Content of bar 1 </Section> ) } const BarContent_2 = () => { return ( <Section> Content of bar 2 </Section> ) }puede usar useState para eso para alternar classList en el elemento. Aquí hay un ejemplo debajo de lo que hago, en su proyecto no sé lo que hace, pero primero se me ocurrirá un ejemplo de tarjeta como su valor predeterminado establece el estado en false en el componente de la tarjeta y cuando haga clic en el botón, cambie ese valor booleano de false a true
así () => setState(!state) siempre establecerá el valor del estado opuesto
cuando cambie el componente de estado, siempre vuelve a renderizar y verifica el estado, y lo hará en more info div, si ese estado es verdadero, muestre more-info active , eso significa que se mostrará su div
y si es false desaparecerá
const Card1 = () => { const [showMore, setShowMore] = useState(false) return ( <div className="card"> <div>Daniel</div> <button onClick={() => setShowMore(!showMore)}>Show More</button> <div class={showMore ? "more-info active": "more-info"}>This is more info Daniel</div> </div> ) }también aquí está mi css lo que hago
.more-info{ opacity: 0; transition: 0.5s ease; } .active{ opacity: 1 } al principio, es bueno hacer cosas como esa, pero te recomendaría usar objetos de matriz para eso en componentes .map() y hacer animaciones de alternancia en eso, buena suerte
también rápidamente hice un ejemplo de trabajo en sandbox
@callmenikk me dio la idea de usar un condicional para representar mi div con estilo cada vez que se cumpliera la condición.
Solución:
//useState hook const [content, setContent] = useState(null); //Conditional function 'Refresh' const Refresh = ({children}) => { const active = content != setContent if (active) { return ( <Section> {children} </Section> ) } } //Timeline section <div> <Bar1 onClick={() => setContent(BarContent_1)}/> <Bar2 onClick={() => setContent(BarContent_2)}/> </div> //Content display and wrapping the content in my Refresh function <Refresh> {content} </Refresh> //Content of each bar, no need to wrap content in my styled (Section) tag since my Refresh button will const BarContent_1 = () => { return ( <div> Content of bar 1 </div> ) } const BarContent_2 = () => { return ( <div> Content of bar 2 </div> ) }