import React, { useState } from 'react' import SliderUp from '@svg/icons/slider-up.svg' import SliderDown from '@svg/icons/slider-down.svg' export const Slide=()=> { // show and hide state on individual button click const [toggleState, setToggleState] = useState(1); const toggleTab = (index:number) => { setToggleState(index); }; //hover between buttons state through the sliderup and sliderdown button const changeState = (direction:string) => setToggleState(prev => { const curr = direction === 'down' ? prev + 1 : prev - 1; return curr < 1 ? 2 : curr > 2 ? 1 : curr }); return ( <div> {/* buttons to the left */} <div> <button onClick={() => changeState('up')} > <SliderUp /> </button> <ul > <li> <button className={toggleState===1 ? "inline-block w-3 h-3 " : "inline-block w-1 h-1"} onClick={() => toggleTab(1)} >` </button> </li> <li> <button className={toggleState===2 ? "inline-block w-3 h-3 " : "inline-block w-1 h-1"} onClick={() => toggleTab(2)}> </button> </li> </ul>

Quiero cambiar la clase de componentes "animate-slideB" a "animate-slideT" al hacer clic en el botón con el estado hacia abajo

 <button onClick={() => changeState('down')} > <SliderDown /> </button> </div> {/* components to the right */} <div> <div className="w-full "> {toggleState == 1 && <div className='animate-slideB'> <TopPart/> // component </div>} {toggleState == 2 && <div className='animate-slideB'> <MythicCol/> //component </div>} </div> </div>

Probé este método de agregar una función al botón con el estado de cambio "abajo" y dar id="sampleDiv" a los elementos div que contienen componentes. Pero no funcionó.

animate-slideB: animación de arriba a abajo,

animate-slideT: animación de abajo hacia arriba

 const handlebuttonclass=()=>{ let sampleElem= document.getElementById("sampleDiv"); if(sampleElem?.className==='animate-slideB'){ sampleElem.className= 'animate-slideT' } else{ sampleElem!.className= 'animate-slideB'; } }