How to scroll to section with React staggered button props
I am trying to modify this button menu:
(please click link to see the fiddle )
codepen.io/andytran/pen/YGyQRY
I want to create an onclick event or scroll to section property, on the individual buttons. This is the array:
const iconArrayOne = [1, 2, 3];
const iconArrayTwo = [1, 2, 3].reverse();
And this is the location of the buttons:
<ButtonGroup>
<StaggeredMotion
defaultStyles={[
{ x: -45, o: 0 },
{ x: -45, o: 0 },
{ x: -45, o: 0 },
]}
As you can see the buttons are listed in an array, I need to identify each index of the array and create an onclick event or even better, use Reacts: to=section property, So each button scroll to a different section: 1 scrolls to section1, 2 scrolls to section2, 3 scrolls to section3...
For demo purpose here are the section component:
import React from "react";
export default function Section({ title, subtitle, dark, id }) {
return (
<div className={"section" + (dark ? " section-dark" : "")}>
<div className="section-content" id={id}>
<h1>{title}</h1>
<p>{subtitle}</p>
</div>
</div>
);
}
This is the property I would like to use
to="section1"
But how to do that in an array?
<ButtonGroup>
<StaggeredMotion
defaultStyles={[
{ x: -45, o: 0 },
{ x: -45, o: 0 },
{ x: -45, o: 0 },
]}