function BlogList({ blogs }) {
const { blogsLoading, searchBlogsLoading } = useBlogsContext();
const blogsLimit = 6;
const { paginate, setPaginate } = useState(1 * blogsLimit);
const paginateHandler = (value) => setPaginate(value * blogsLimit);
if (blogsLoading || searchBlogsLoading) {
return <Spinner animation="border" variant="light" />;
}
return (
<> <div>
{blogs.slice(paginate - 6, paginate).map((blog) => {
return (
<div key={blog.id}>
<div>{blog.title}</div>
<div>{blog.body.substring(0, 100)}...</div>
<div><MdAddReaction />
<span">{blog.reactions}</span>
</div>
<div>{blog.tags.map((tag, idx) => (
<span key={idx}>{tag}</span> ))}
</div>
<div>
<Link
to={`/blog/${blog.id}`}>
Read More
</Link>
</div>
</div>
);
})}
</div>
<Pagination noOfBlogs={blogs.length} paginateHandler={paginateHandler} />
</>
);
}
BlogList.propTypes = {
blogs: PropTypes.any,
};
export default BlogList;
I also changed the prop type to array and string, but it didn’t change
The values of the blogs are received from dummy json API
The data enters the blogs correctly, but it still displays this error
Uncaught TypeError: blogs.slice is not a function