Home>

I have a component rendered with array.map().
The following is an operation demo.
demo(CodeSandBox)
Colorful square elements scroll sideways.

Scrolling stops when I scroll to the pink element, but I want to loop the scrolling from pink to red → blue → green →...

Applicable source code
export default function App() {
  const colorArray = ["red", "blue", "green", "yellow", "pink"];
  const colorComponent = colorArray.map((item, key) =>(
    
      
    
  ));
  return (
  <>
    <p>this is loop content</p>
      {colorComponent}
  </>
  );
}
.red {
  background: red;
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.yellow {
  background: yellow;
}
.pink {
  background: pink;
}
What I tried

I think it's not exactly a loop, but when I looked into infinite scrolling,react-infinite-scroll-componentI found a library called.
There were some demos that used the library, but there were literally infinite scrolling demos or lazy loading demos.

I googled "react scroll loop" and found a library, but it was a library that implements loop animation.

  • Answer # 1

    Hello

    Why not try react-waypoint?yarn add react-waypointAfter that, the correction will be as follows.

    import React from "react";
    +import {Waypoint} from'react-waypoint';
     import "./style.css";
    +const COLORS = ["red", "blue", "green", "yellow", "pink"];
    +
     export default function App() {
    -const colorArray = ["red", "blue", "green", "yellow", "pink"];
    + const [colorArray, setColorArray] = React.useState(COLORS);
    +
    + const handleWaypointEnter = () =>{
    + setColorArray(colorArray.concat(COLORS));
    +}
    +
       const colorComponent = colorArray.map((item, key) =>(
         
           
         
    -));
    + )).concat(<Waypoint key={-1} horizontal onEnter={handleWaypointEnter} />);
       return (
      <>
        <p>this is loop content</p>
          {colorComponent}
      </>
      );
    }


    As a mechanism,ofonEnterEach timecolorArrayAdd an array of 5 colors to. The following is a fork of the code in the question and the code in the box to check the operation of the App that reflects the above correction.

    Codesandbox for operation check:https://codesandbox.io/s/q271097-20bym

    I'm glad if you can use it as a reference.