No comprendo bien el código de ListPost (miren los comentarios). Necesito una explicación paso a paso del código.
import { useState, useEffect } from "react"
import "../assets/css/componentes/card.css"
import { buscar } from "../api/api"
import { Link } from "react-router-dom"
const ListPosts = ({ url }) => {
const [posts, setPosts] = useState([]) //aquí el usestate no lo comprendo bien, se guarda en un array post, setPost
useEffect(() => {
buscar(url, setPosts)
}, [url]) // El useEffect qué hace exactamente? veo que retorna la llamada de la funcion buscar con parametros url y setpost, pero al final veo que pasa una array [url]
return (
<section className="posts container">
{
//En este método map supongo que recorre cada post del json y aquí se le hace la estructura visual, con la destructuracion de cada propiedad del json, y en el link en el prop se le llama /posts/id, es así?
posts.map(post => {
const { id, title, metadescription, categoria } = post;
return <Link to={`/posts/${id}`} className={`post__card post-card--${categoria}`} key={id}>
<article >
<h3 className="post-card__title">
{title}
</h3>
<p className="post-card__meta">{metadescription}</p>
</article>
</Link>
})
}
</section>
)
}
export default ListPosts
Y en el Home lo único que hace es importa el componente ListPosts para agregarlo y pasa la prop url con /posts, supongo que hace referencia al post del json
<ListPosts url={'/posts'}/>
Y una duda extra, cuál es la diferencia de usestate y useeffect?
