Next.js Discord

Discord Forum

Load more functionality for dynamic content

Answered
Yellowstripe scad posted this in #help-forum
Open in Discord
Yellowstripe scadOP
Hello, I'm trying to create "load more' functionality which would load 10 additional posts on button click.
I've tried to do it on my own and even with chatGPT but I was not able to produce working functionality, there was always some errors.
By default there should be always 10 posts visible on page load.
I would greatly appriciate any help and tips how that functionality should be created.
Page structure:
app
/blog
page.tsx
[id]
page.tsx


Thanks!

"use client"
import { dataURL, fetchData } from '@/lib/fetchData';
import Post from "@/components/posts/Post";
import { Suspense } from "react";

let limit = '10'
const Blog = async () => {
  
  const posts = await fetchData(`${dataURL}?limit=${limit}`)

  const loadMoreHandler = async () => {};

  const fallback = <div className='flex items-center justify-center'>Loading...</div>

  return <Suspense fallback={fallback}>
      <section className='container mx-auto px-4 py-10'>
        <h1 className='text-md md:text-5xl'>Posts</h1>
        <p className='my-2'>Check out our new posts!</p>
        <div className='grid gap-10 grid-cols-1 md:grid-cols-2'>
          {posts.map((item: PostType) => 
            <Post key={item.id} {...item} customClass={'w-full my-6'} />
          )}
        </div>
        <div className='text-center py-10'>
          <button className='px-4 py-2 font-semibold text-sm border-2 border-slate-900 text-slate-900 rounded-full transition-all shadow-sm hover:shadow-xl hover:bg-slate-900 hover:text-white' onClick={loadMoreHandler}>Load more</button>
        </div>
      </section>
  </Suspense>
}


export default Blog;
Answered by Yellowstripe scad
@Bombay damn, I finally managed to do it! The problem was with setting Blog component as async function itself. Without it it works great! Do you know why maybe?
View full answer

3 Replies

Bombay
"use client"
import { useEffect, useState } from "react";
import { Suspense } from "react";

import { dataURL, fetchData } from '@/lib/fetchData';
import Post from "@/components/posts/Post";


let POSTS_LIMIT = '10'

const Blog = async () => {
  const [posts, setPosts] = useState([])
  
  // Load posts, also called on button click
  const loadPosts = () => {
    const response = await fetch(...) // <- fetch your posts
    setPosts(response.posts) // <- add posts to list
  }

  // Load posts on mount  
  useEffect(() => {
    loadPosts()
  }, [])
 

  const fallback = <div className='flex items-center justify-center'>Loading...  </div>


  return (<Suspense fallback={fallback}>
      <section className='container mx-auto px-4 py-10'>
        <h1 className='text-md md:text-5xl'>Posts</h1>
        <p className='my-2'>Check out our new posts!</p>

        <div className='grid gap-10 grid-cols-1 md:grid-cols-2'>
          {posts.map((item: PostType) => 
            <Post key={item.id} {...item} customClass={'w-full my-6'} />
          )}
        </div>

        <div className='text-center py-10'>
          <button className='px-4 py-2 font-semibold text-sm border-2 border-slate-900 text-slate-900 rounded-full transition-all shadow-sm hover:shadow-xl hover:bg-slate-900 hover:text-white' onClick={() => loadPosts()}>Load more</button>
        </div>
      </section>
  </Suspense>
)}


export default Blog;
Yellowstripe scadOP
@Bombay damn, I finally managed to do it! The problem was with setting Blog component as async function itself. Without it it works great! Do you know why maybe?
Answer