Why React component only renders one item in array once but iterates through all items?

Question

I am stuck with a problem where I am building a blog with React and storing my blog posts in Firebase.

The problem is that it goes through all items correctly in the useeffect function but when I want to render my items on the page it only shows one, the last item in my array.

Here is my code:

export default function Blog(props){
    const [blogPost, showBlogPost] = useState(null);
    const [blogPosts, setBlogPosts] = useState([]);

    useEffect(() => {
            db.collection('blogposts').get().then(posts => {
                console.log(posts.docs.length);
                posts.docs.forEach(post => {
                    blogPosts.push(post.data());
                    console.log(post.data());
                    
                    setBlogPosts([post.data()]);
                    console.log(blogPosts);
            })  
        })
    }, [])

    console.log(blogPosts);

    return(
        <div>  
            {CreateBlogPost()}
                {blogPosts.map(post => {                  
                        switch (blogPost) {
                            case post.id:
                                return( <BlogPost goBack={() => showBlogPost(null)} id={post.id} date={post.date} heading={post.heading} introduction={post.introduction} entry={post.entry} /> );   
                            case null: 
                                        return(
                                            <div> 
                                                 <ul className="blog-posts">
                                                     <div className="blog-post-item" onClick={() => showBlogPost(post.id)}>
                                                             <img src={Image}  alt="Girl in a jacket" width="400" height="200" />
                                                             <h1 id="blog-post-heading">{post.heading}</h1>      
                                                         <div className="time-stamp">
                                                             <p id="blog-post-publish-date"><ClockIcon /> <time dateTime={post.date}>{post.date}</time></p>
                                                         </div>
                                                     </div>
                                                 </ul>
                                            </div>
                                        );           
                            default: return null
                        }
                })}
        </div>
    )
}

Here is where I console log my array after pushing all my data from Firebase in my array which works fine:

The code iterates through my code fine only within the useEffect function but when I console log blogPosts state array outside useEffect and try to render my array, it only renders the last item on the page.

Can someone please help me with this issue and guide me on how I should go forward here. All help is appreciated.

Thank you.

CertainPerformance · Accepted Answer · 2021-06-27 22:02:24Z

4

Three problems:

Don't mutate state in React - you shouldn't be using .push on stateful arrays
The setBlogPosts([post.data()]); only sets the new state array to a single item
You're calling setBlogPosts for every element in the array, when you should only be calling it once, after processing all posts.docs

Use

useEffect(() => {
    db.collection('blogposts').get().then(posts => {
        const newBlogPosts = [];
        posts.docs.forEach(post => {
            newBlogPosts.push(post.data());
        })
        setBlogPosts(newBlogPosts);
    })
    // .catch(handleErrors); // don't forget this part
}, [])

answered Jun 27, 2021 at 22:02

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kelank Over a year ago

Thanks alot for your quick response and help. It solved my problem. Thanks again.

Collectives™ on Stack Overflow

Why React component only renders one item in array once but iterates through all items?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related