Entonces, quiero agregar una clase a cada uno de estos elementos de la lista en orden, y no simultáneamente, cada vez que presione "Siguiente", y luego eliminarlos nuevamente después de presionar "anterior". Estoy trabajando en React y sé que puedes hacer algo con State, etc., pero soy nuevo en React, así que agradezco cualquier ayuda.
HTML
<ol id="prog" className="progress-track"> <li className="progress-1"> <div className="icon-wrap"></div> <span className="progress-text">The position</span> </li> <li className="progress-2 test"> <div className="icon-wrap"></div> <span className="progress-text">Qualifications</span> </li> <li className="progress-3 test"> <div className="icon-wrap"></div> <span className="progress-text2"> Abtion as a workplace </span> </li> <li className="progress-4 test"> <div className="icon-wrap2"></div> <span className="progress-text3">Apply</span> </li> </ol>¡Déjame saber si necesitas más información! El diseño
Necesitarás tener un estado. Como const [activeItem, setActiveItem] = useState(1);
Como tiene 4 elementos, tendrá cuatro posibles tipos de estado.
y cuando haga clic en cada elemento, establecerá su estado en la identificación de ese elemento. Por ejemplo, cuando hace clic en el elemento 3, configurará su estado en 3. y verifique si su estado es igual a 3, configurará una clase para su nombre de clase. className={ example ${activeItem === 1 ? 'active' : ''} }. Y al hacer clic en Siguiente, solo agregará 1 al estado actual y menos uno del estado que tiene cuando hace clic en el anterior. Y verifique si su número de estado está en 4, significa que ha alcanzado su límite. y cuando el usuario hace clic en 5 veces para establecer su estado en 1.
