Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to offsett a list display?

I have a question concerning the display of a list in reactJS (with Next.JS).

This is the usual way I display a list, using such code :

    theList.map((e:MyType) =>
        <div key={e.orderNbr}>
            <DisplayOneListElement .... />
        </div>)

The list is then shown starting with its first element and it works fine. But assuming the list has 300 elements long, how would I change the code so the user would see the list starting with its 191st element ?
While keeping the possibility to scroll up or down later on.

191 is of course arbitrary.

Tags:

2

Answers


  1. 0

    You want to render the subset of the list efficiently. You may think of using libraries like react-window or react-virtualised if feasible.

    Otherwise, you will have to write logic for showing a certain subset of list at a time. Here is what you can use as a base –

    const renderListFromArbitraryIndex = (index) => {
    return <DisplayOneListElement key={theList[index].orderNbr} data={theList[index]} />
}

const renderListBeforeIndex = (index) => {
    theList.splice(0, index).map((e: MyType) =>
    <div >
        <DisplayOneListElement  key={e.orderNbr} />
    </div>);
}

const renderListAfterIndex = (index) => {
    theList.splice(index, theList.length - 1).map((e: MyType) =>
    <div >
        <DisplayOneListElement key={e.orderNbr} />
    </div>);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
    Login or Signup to reply.
  2. 0

    I have noted your latest comment that you have resolved the case. Still the below post may be useful to those seeking similar information.

    As we know, for scrolling functionality, we need to "step out" of React and communicate with the external API. React provides a better way to do this through Ref. DOM nodes can be manipulated through Ref. When React updates the DOM, it will populate Ref with DOM node and will make the node accessible from the code.

    Please see below a sample code which implements a similar functionality you have been asking for. It is based on Ref.

    Note: In case you need to manipulate a list of DOM nodes, please see this sample code: How to manage a list of refs using a ref callback

    App.js

    import { useEffect } from 'react';
import { useRef } from 'react';

const numbers = [];
for (let i = 0; i < 100; i++) {
  numbers[i] = i;
}

export default function App() {
  let itemRef = useRef(null);
  const selectedIndex = 99;

  useEffect(() => {
    console.log(itemRef);
    if (itemRef) {
      itemRef.current.scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'center',
      });
    }
  }, []);

  return (
    <>
      <ul>
        {numbers.map((item, index) => (
          <li key={item} ref={index == selectedIndex ? itemRef : null}>
            item: {item}
          </li>
        ))}
      </ul>
    </>
  );
}

    Test run:

    On loading the app, there will be 99 list items displayed, and an automatic scrolling will be performed by the code to the item indexed at 99. The items on top will still be accessible through scrolling.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search