An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Some of Our Sources
- Techcrunch
- Technology Review
- Team Treehouse
- Smashing Magazine
- Vandelay Design
- Noupe
- CSS Globe
- Line 25
- Stylized Web
- Design Modo
Help Webnuz
Referal links:
How to create load more logic in React
So usually we prefer to use load more logic using the backend api where we pass the skip value and it will return us the next set of data but what if we want to implement same logic in frontend for some specific cases. In this article we will gonna learn how to create load more logic in React.
Checkout this better way of pagination in backend.
Problem
Lets assume we have an Array of 100 objects in frontend and we want to display only n items at a time and next set of data will be loaded on l*oad more* button click.
We usually do that thing using the backend where we passes the skip value and it will return us the next set of data but now we want to do same thing in our React Frontend.
Solution
First of all we will gonna have few variable for our load more logic.
The length of our data is specified using the LENGTH.
const LENGTH = 50;After that I created an Array DATA of length LENGTH.
const DATA = [ ...Array(LENGTH).keys() ];Then a random image for showing in UI i.e IMAGE_SRC.
const IMAGE_SRC="https://source.unsplash.com/random";Limit will be 10. i.e LIMIT
const LIMIT = 10;const LENGTH = 50;const DATA = [ ...Array(LENGTH).keys() ];const IMAGE_SRC="https://source.unsplash.com/random";const LIMIT = 10;Now we will gonna write few states.
We also gonna use slice and concat from lodash for simplicity.
To check we have more records or not.
const [showMore,setShowMore] = useState(true);Initial render list
const [list,setList] = useState(slice(DATA, 0, LIMIT));For managing the index.
const [index,setIndex] = useState(LIMIT);Our load more logic will gonna do the following things.
- It will update the index by adding LIMIT to it.
- Check for we have more records or not.
- Gonna update our list by adding next set to our Array.
const loadMore = () =>{ const newIndex = index + LIMIT; const newShowMore = newIndex < (LENGTH - 1); const newList = concat(list, slice(DATA, index, newIndex)); setIndex(newIndex); setList(newList); setShowMore(newShowMore); }Our Render method will gonna return list of images and a load more button.
<div className="App"> <div className="image-container"> {list.map(()=><img src={IMAGE_SRC} alt="random"/>)} </div> {showMore && <button onClick={loadMore}> Load More </button>} </div>Our full component will gonna look like this.
import React,{useState} from "react";import { slice, concat, } from 'lodash';import "./styles.css";const LENGTH = 50;const DATA = [ ...Array(LENGTH).keys() ];const IMAGE_SRC="https://source.unsplash.com/random";const LIMIT = 10;export default function App() { const [showMore,setShowMore] = useState(true); const [list,setList] = useState(slice(DATA, 0, LIMIT)); const [index,setIndex] = useState(LIMIT); const loadMore = () =>{ const newIndex = index + LIMIT; const newShowMore = newIndex < (LENGTH - 1); const newList = concat(list, slice(DATA, index, newIndex)); setIndex(newIndex); setList(newList); setShowMore(newShowMore); } return ( <div className="App"> <div className="image-container"> {list.map(()=><img src={IMAGE_SRC} alt="random"/>)} </div> {showMore && <button onClick={loadMore}> Load More </button>} </div> );}You will gonna see output similar to this.
Our React Frontend load more logic is ready.
Original Link: https://dev.to/narendersaini32/how-to-create-load-more-logic-in-react-474m
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To