Having an Issue with Active class, react-fullpage #388
Description
I am trying to use the active class for two slides. I am using react with Vite in Dev mode. I am not getting the expected results.
According to the https://github.com/alvarotrigo/fullPage.js, If you want to define a different starting point rather than the first section or the first slide of a section, just add the class active to the section and slide you want to load first.
function App() {
return (
<ReactFullpage
//fullpage options
licenseKey = {''}
scrollingSpeed = {1000} /* Options here */
controlArrows={true}
menu={true}
render={({ state, fullpageApi }) => {
return (
<ReactFullpage.Wrapper>
<div className='section'>
<div className='slide'>
<h1>Slide 1</h1>
</div>
<div className='slide active'>
<h1>Slide 2, Want this to show first</h1>
</div>
</div>
</ReactFullpage.Wrapper>
);
}}
/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)Versions
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@vitejs/plugin-react": "^3.1.0",
"vite": "^4.1.0"
As I was writing this I figured out that React.StrictMode was preventing Active class to have it's expected results. Simply removing React.StrictMode fixed it.