I want to add the class 'active' in fullpage.js with react, and I don't know how

Question

I am using fullpage.js and I want that depending on the section in which I am. Add a class = 'active' or remove that same class. For example: if I am in # section1 add 'active' if I leave that and go to # section2 add 'active' in # section2 and delete the 'active' in # section1

export default class SearchNav extends React.Component {

render(){
    return (
        <div id='fp-nav' class='left'>
            <ul>
                <li>
                    <a href="#section1"></a>
                </li>
                <li>
                    <a href="#section2"></a>
                </li>
                <li>
                    <a href='#section3'></a>
                </li>
                <li>
                    <a href='#section4'></a>
                </li>
            </ul>
        </div>
    )
}

}

Answer 1

You could create a state with an object which contains boolean props. Then set an `active` class on each section if the object linked to them gets a `true` value.

And setup a function will trigger false / true to the good prop's object when you click on a section?

Answer 2

You don't actually need to.

fullPage.js automatically adds the active class for you in the active section/slide in addition of adding another "state" class on the body element, (for example fp-viewing-page2-1 )

You can read more about these state classes on the documentation. https://github.com/alvarotrigo/fullPage.js#state-classes-added-by-fullpagejs