0

I have been struggling with connecting my single blog to all my blogs via the "read more" button. I have been able to successfully connect to contentful and display all my blogs on the page but whenever I click on the button to show the single blog it displays the 404 error page vs the content for the single blog article. The URL slug displays correctly every time I select the read more button, so it tells me that the routes are working. Can someone please help in telling me what I'm doing wrong with my code on the single blog page? It's greatly appreciated!!

All Blogs Code:

import React, {useState, useEffect, useCallback} from "react";
import {client} from '../../../Client'

const Content = () => {
    const [blogPosts, setBlogPosts]= useState([])

    const cleanBlogPosts = useCallback((rawData) => {
        const cleanBlogPosts= rawData.map((posts) => {
            const {sys, fields}= posts
            const {id} = sys
            const blogTitle = fields.title
            const blogImage = fields.featuredImage.fields.file.url
            const blogDescription = fields.description
            const blogBody = fields.body
            const slug = fields.slug
            const updatedPosts = {id, blogTitle, blogImage, blogDescription, blogBody, slug}
            return updatedPosts
        })
        setBlogPosts(cleanBlogPosts)
    }, [])

    const getBlogPosts = useCallback( async()=>{
        try{
            const response = await client.getEntries({content_type: 'blogPost', order: 'sys.createdAt'})
            const responseData = response.items
           if(responseData){
               cleanBlogPosts(responseData)
           }else{
               setBlogPosts([])
           }
        } catch(error){
            console.log(error)
        }
    }, [cleanBlogPosts])

    useEffect(()=>{
        getBlogPosts()
    },[getBlogPosts])

console.log(blogPosts)

return (
        <>
        <main id="body-content">
                <header className="wide-mt-0 blogsHeader">
                    <div >
                        <img src="images/banner_2.jpg" className="img-fluid blogimg d-block w-100 h-100 p-0" alt=""/>
                    </div>
                </header>
                <section className="wide-tb-5 pb-5">
                <div ><h1 className="blogh1 my-5 display-5" align="center">Our Blog</h1></div>
                <hr className="w-75"/>
                </section>
                </main>
                <div className="container" id="blogContainer">
        {blogPosts.map((item)=> {
            
           const { id, slug, blogTitle, blogDescription, blogBody, blogImage, index }= item
            return (
                                <div key ={index} className="card">
                                    <img src={blogImage} alt="" className="card-img-top rounded img-thumbnail" />
                                    
                                    <h4 className="card-title h4-md mb-3" align="center"><a href={`/blogsingle/${slug}`}>{blogTitle}</a></h4>
                                    <p className="card-text">{blogDescription}</p>
                                    <a href={`/blogsingle/${slug}`}className="btn btn-primary btn-theme bg-navy-blue no-shadow">Read More <i className="icofont-rounded-right"></i></a>
                                </div>
                        
                     
                
            )
            })}
            </div>
        </>
    );
};
export default Content;


This is the Single Blog Code: (not displaying corresponding single blogs when clicking on button on all blogs page)


import {React, useEffect, useState, useCallback} from "react";
import {client} from '../../../Client'

const Content = () => {

    const [singleBlog, setSingleBlog] = useState([])

    const cleanSingleBlog = useCallback((rawData) => {
       const cleanSingleBlog = rawData.map((post) => {
            const {sys, fields} = post
            const {id} = sys
            const slug = fields.slug
            const blogTitle = fields.title
            const blogImage = fields.featuredImage.fields.file.url
            const blogDescription = fields.description
            const blogBody = fields.body
            const updateSingleBlog = {id, blogTitle, blogImage, blogDescription, blogBody, slug}
            return updateSingleBlog
        })
        setSingleBlog(cleanSingleBlog)
    }, [])


    const getSingleBlog = useCallback (async (slug) => {
        try {
            const response = await client.getEntries(
                {content_type: 'blogPost',
                'fields.slug' : slug
            })
            const responseData = response.items
            if(responseData) {
                cleanSingleBlog(responseData)
            }else{
                setSingleBlog([])
            }
        }catch(error) {
            console.log(error)
        }
    }, [cleanSingleBlog])

    useEffect(() => {
        getSingleBlog()
    }, [getSingleBlog])

    console.log(singleBlog)

    return (
        <>
            <main id="body-content">
                <header className="mt-5">

                </header>
                </main>
            <div className="container">
                {singleBlog.map((item) => {
                    const { id, slug, blogTitle, blogImage, blogDescription, blogBody} = item
                    return(
                                        <div  key = {id} >
                                            <img src={blogImage} alt="" className="rounded mb-4" />
                                          
                                            <h4 className="h4-md mb-3 fw-7 txt-blue" align="center">{blogTitle}</h4>
                                            <p>{blogDescription}</p>
                                            <p>{blogBody}</p>

                                            
                                        </div>
                       
                )
                        
            })}
                
                </div>           
          
        </>
    );
};
export default Content;

1 Answer 1

0

Use getEntry('id') for single post and then map in cleanSingleBlog doesn't work because you get an object not an array.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.