So I want to add a class to each of these list items in order, and not simultaneously, whenever you press "Next", and ofc remove them again after pressing "previous". I'm working in React and i know you can do something with State etc, but I'm new at React, so any help is appreciated.
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>
Let me know if you need any more information! The design
You will need to have a state. Like const [activeItem, setActiveItem] = useState(1);
As you have 4 items you will have four possible state types.
and when you click on each item you will set your state to that items id. For example when you click on Item 3 you will set your state to 3. and check if your state is equal to 3 you will set a class to your className. className={example ${activeItem === 1 ? 'active' : ''}}. And when clicking to Next you will just add 1 to the current state and minus one from state you have when you click on the previous. And check if your state num is on 4 it means your reached limit. and when user clicks 5 time to set your state to 1.
