Here's what I am trying to do. I am getting a bunch of objects back from a JSON response (locally). I want to display the first let's say 12 coming back but want to add a "see more" link to show the next series of 12. I know you can split arrays but in my case, not sure if I should even split them rather just have the "see more" link show the next 12 in the array of objects coming back. I imagine it's creating a function that calls 12 (or whatever number) at a time or something when you click the link. hope that makes sense. Thanks

Release component (looping through JSON to display releases)

import releases from "../data/releases.json";
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import '../main.css'

const Release = () => {
 //experimenting with splitting up array but not implemented yet
  function sliceIntoChunks(arr, chunkSize) {
    const res = [];
    for (let i = 0; i < arr.length; i  = chunkSize) {
      const chunk = arr.slice(i, i   chunkSize);
      res.push(chunk);
    }
    return res;
  }
  console.log(sliceIntoChunks(releases, 3));

  return (
    <Wrapper>
      <div className="release fadein">
        {releases.map((release, i) => (
          <div className="item" key={i}>
            <Link to={`/release/${release.id}`}>
              <img src={release.imageURL} alt={release.artist} />
            </Link>
          </div>
        ))}
         {/* Implement here to show the next 12 in the array*/}
        <a href="#"> See more...</a>
      </div>
    </Wrapper>
  )
}

Json file (showing the first 3 objects for brevity but there's say 40 or 50 that will be coming back)

[
  {
    "id": 0,
    "artistID": "ES",
    "imageURL": "../images/releases/cloudbursts.jpg",
    "title": "Cloud Bursts",
    "artist": "ERIC SHANS",
    "description": "One of the main 3Bridge Records bosses Eric Shans is back with his first original music of 2022, 'Cloud Bursts'. .",
    "buy": "https://www.beatport.com/release/ardour/3096956",
    "stream": "https://open.spotify.com/album/5vNYmx4uNY5fIPrOCR0cUa?si=lwCXwLGtSn6g6ZNToPZKRQ"
  },
  {
    "id": 1,
    "artistID": "ES",
    "imageURL": "../images/releases/archtypes.jpg",
    "title": "Archetypes",
    "description": "Mexico City based artist Eisenheim is back on 3Bridge with a killer EP called 'Archetypes'.n",
    "artist": "ERIC SHANS",
    "buy": "https://www.beatport.com/release/we-choose/1916121",
    "stream": "https://open.spotify.com/album/4cutoknbgciTGGpAYSZXfK?si=gsNvR6ytTN6KdrPORfSLOg"
  },
  {
    "id": 2,
    "artistID": "BG",
    "imageURL": "../images/releases/pingpong.jpg",
    "title": "Ping Pong",
    "artist": "SIMON SAMPLER & FISCHMEHL",
    "description": "We welcome Simon Sampler back to the label for a great 2 tracker featuring Austrian producer Fischmehl as well.",
    "buy": "https://www.beatport.com/release/cloud-bursts/3687306",
    "stream": "https://open.spotify.com/album/4cutoknbgciTGGpAYSZXfK?si=gsNvR6ytTN6KdrPORfSLOg"
  }
]

CodePudding user response：

Would recommend having a simple button that add extra 12 items to a state when clicking. It's easily done by using the .slice() array method:

import React from "react";

const STEP = 12;
const data = [...Array(100).keys()].map((id) => ({ id }));

export default function App() {
  const [items, setItems] = React.useState(data.slice(0, STEP));

  const loadMore = () => {
    setItems([...items, ...data.slice(items.length, items.length   STEP)]);
  };

  return (
    <div className="App">
      <ul>
        {items.map((item) => {
          return <li>{item.id}</li>;
        })}
      </ul>
      <button onClick={loadMore}>Load more</button>
    </div>
  );
}

CodePudding user response：

Use usestate hook to extend Const [present ,setPresent]=useState(12) releases.slice(0, present).map(()=> return div here) ) <a onClick={()=>setPresent (present 12)}

See more