Nothing is showing when I loop through the array using forEach in react

Question

I want to show the blog author and blog title in the array on my html page but nothing is displayed. I used the map method and it worked but the forEach method shows nothing. I will like a solution in for loop and forEach loop Here is my code:

import { useState } from "react";

const Home = () => {

const [blogs, setBlogs] = useState([
    { title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 },
    { title: 'Welcome party!', body: 'lorem ipsum...', author: 'yoshi', id: 2 },
    { title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 }
]);


return ( 
    <div className="home">
      

         {blogs.forEach((blog) => {
            <div className="blog-preview" key={blog.id}>
                <h2>{ blog.title }</h2>
                <p>Written by{ blog.author }</p>
            </div>
        })} 
       
    </div>
      
 );
 }export default Home;

forEach returns undefined, therefore nothing will be displayed. Is there something unsatisfactory about using map? — qrsngky, Mar 29 '22 at 05:38
https://stackoverflow.com/questions/34426458/javascript-difference-between-foreach-and-map — A.R.SEIF, Mar 29 '22 at 05:39

score 0 · Answer 1 · answered Mar 29 '22 at 05:42

0

Try it with map.
{blogs.map((blog) => {<div className="blog-preview" key={blog.id}><h2>{ blog.title }</h2><p>Written by{ blog.author }</p></div>})}

answered Mar 29 '22 at 05:42

krani

37
4

score 0 · Answer 2 · answered Mar 29 '22 at 05:46

0

I usually prefer to use .map for this like

blogs.map((blog) => (
      <div> //your code </div>
    ))

answered Mar 29 '22 at 05:46

mocha

45
6

score 0 · Answer 3 · answered Mar 29 '22 at 06:12

0

Use map instead because the map method returns a new array by applying the callback function on each element of an array, while the forEach method doesn't return anything.

so you have to use it like this.

{blogs.map((blog) => {
            <div className="blog-preview" key={blog.id}>
                <h2>{ blog.title }</h2>
                <p>Written by{ blog.author }</p>
            </div>
        })}

like this.

answered Mar 29 '22 at 06:12

Saqib Ur Rahman

36
1
2

thanks for the explanation, I really appreciate. I already used map but I was questing for knowledge. can I used for loop? – Ademola Mar 29 '22 at 09:02
no, you can't. a foreach loop processes an instance of each element in a collection(like array) in turn, while a for loop can work with any data and is not restricted to collection elements alone – Saqib Ur Rahman Mar 29 '22 at 12:09
ok thanks I really appreciate – Ademola Mar 29 '22 at 13:19
I don't have enough reputation just yet – Ademola Mar 29 '22 at 17:44

Nothing is showing when I loop through the array using forEach in react

3 Answers3