Привет всем. Есть желание выделить часть кода нижеследующего в отдельный компонент. Не приложу ума как это сделать, если есть useState и всякие вкрапления одного кода в другой. Плохо если честно пока в этом разбираюсь. Вот целый код.
import { useState } from "react"
import Link from 'next/link'
import { getAllPosts } from '@/lib/getAllData'
export default function Blog() {
/*loadmore*/
const initialPostList = 2
const incrementInitialPostList = 1;
const [showPosts, setShowPosts] = useState(initialPostList);
const handleLoadMore = () => {
setShowPosts(showPosts + incrementInitialPostList)
}
const blogs = getAllPosts()
return (
<main className="flex flex-col">
<h1 className="text-3xl font-bold">
Мой блог
</h1>
<section className='py-10'>
<div className='py-2'>
{blogs.slice(0, showPosts).map(blog => (
<Link href={'/blog/' + blog.slug} passHref key={blog.slug}>
<div className='py-2 flex justify-between align-middle gap-2'>
<div>
<h3 className="text-lg font-bold">{blog.meta.title}</h3>
<p className="text-gray-400">{blog.meta.description}</p>
</div>
<div className="my-auto text-gray-400">
<p>{blog.meta.date}</p>
</div>
</div>
</Link>
))}
{showPosts < blogs.length ? (
<div><button className="mainBtn loadBtn" onClick={handleLoadMore}>Больше статей</button></div>
) : (
<div><button className="mainBtn loadBtn" disabled>Больше нет статей</button></div>
)}
</div>
</section>
</main>
)
}
И вот это сделать отдельным компонентом
/*loadmore*/
const initialPostList = 2
const incrementInitialPostList = 1;
const [showPosts, setShowPosts] = useState(initialPostList);
const handleLoadMore = () => {
setShowPosts(showPosts + incrementInitialPostList)
}
{showPosts < blogs.length ? (
<div><button className="mainBtn loadBtn" onClick={handleLoadMore}>Больше статей</button></div>
) : (
<div><button className="mainBtn loadBtn" disabled>Больше нет статей</button></div>
)}
То есть как-то так должно быть
'use client'
import { useState } from "react"
export default function LoadMore() {
/*loadmore*/
const initialPostList = 2
const incrementInitialPostList = 1;
const [showPosts, setShowPosts] = useState(initialPostList);
const handleLoadMore = () => {
setShowPosts(showPosts + incrementInitialPostList)
}
return (
{showPosts < blogs.length ? (
<div><button className="mainBtn loadBtn" onClick={handleLoadMore}>Больше статей</button></div>
) : (
<div><button className="mainBtn loadBtn" disabled>Больше нет статей</button></div>
)}
)
}
Но так конечно не работает... нужно вытащить
blogs из родителя и так далее. При этом я не могу например использовать в родителе
useState, а в компоненте
const blogs = getAllPosts() так как компонент должен работать на клиенте (
use client), а родитель на сервере. NextJS 13 со своей серверной генерацией подкидывает проблем. Можно как то решить это или нет?
Средний
