Quiero mostrar el autor del blog y el título del blog en la matriz de mi página html, pero no se muestra nada. Usé el método del mapa y funcionó, pero el método forEach no muestra nada. Me gustará una solución en for loop y forEach loop Aquí está mi código:
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;Pruébelo con el mapa.
{blogs.map((blog) => {<div className="blog-preview" key={blog.id}><h2>{ blog.title }</h2><p>Written by{ blog.author }</p></div>})}
Por lo general, prefiero usar .map para esto como
blogs.map((blog) => ( <div> //your code </div> ))Use map en su lugar porque el método map devuelve una nueva matriz al aplicar la función de devolución de llamada en cada elemento de una matriz, mientras que el método forEach no devuelve nada .
así que tienes que usarlo así.
{blogs.map((blog) => { <div className="blog-preview" key={blog.id}> <h2>{ blog.title }</h2> <p>Written by{ blog.author }</p> </div> })}como esto.