CODEWITHSUNDEEP
arraysreactjsscrollbuttongroupreact-motion
marialaustsen
marialaustsen

Reputation: 105

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)

https://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"

Put how to do that on an array?

<ButtonGroup>
  <StaggeredMotion
    defaultStyles={[
      { x: -45, o: 0 },
      { x: -45, o: 0 },
      { x: -45, o: 0 },
    ]}

Upvotes: 0

Views: 815

Answers (1)

Horacio Herrera
Horacio Herrera

Reputation: 610

in order to link to a section in your page, you need to set an id attribute to each section, so then you can pass that as a "link" to each button

import React from "react";

export default function Section({ title, subtitle, dark, id }) {
  return (
    <div id="UNIQUE_ID_FOR_EACH_SECTION" className={"section" + (dark ? " section-dark" : "")}>
      // ...
    </div>
  );
}

with this in place, then you can have maybe an array with all the sections and thenyou can pass that to each button on the map function you use to render each button.


const links = [
  {
    label: "something",
    url: "#UNIQUE_ID_FOR_EACH_SECTION_1"
  },
  {
    label: "something else",
    url: "#UNIQUE_ID_FOR_EACH_SECTION_2"
  }
]

// then on each button:

<Button to={links[index].url} />

does this help?

Upvotes: 0

Related Questions