La función de mapeo de React.js no puede renderizar el componente personalizado.
Aquí estoy obteniendo los datos del formulario y mostrándolos en mi componente personalizado.
Aquí está el código de la función map:
{posts.map(({ id, data: { name, description, message, photoUrl } }) => {
console.log("data: ", name);
return (
<post key="{id}" name="{name}" description="{description}" message="{message}" photourl="{photoUrl}"></post>
);
})}
Aquí está el código de mi componente personalizado:
function Post({ name, description, message, photoUrl }) {
console.log("Función llamada");
return (
<div classname='post'>
<div classname="post__header">
<avatar></avatar>
<div classname="post__info">
<h2>{name}</h2>
<p>{description}</p>
</div>
</div>
<div classname="post__body">
<p>{message}</p>
</div>
<div classname="post__buttons">
<inputoption icon="{ThumbUpAltOutlinedIcon}" title='Like' color='gray'></inputoption>
<inputoption icon="{ChatOutlinedIcon}" title='Comment' color='gray'></inputoption>
<inputoption icon="{ShareOutlinedIcon}" title='Share' color='gray'></inputoption>
<inputoption icon="{SendOutlinedIcon}" title='Send' color='gray'></inputoption>
</div>
</div>
);
}
export default Post;
¿Alguien puede ayudarme?
davy.ai
Parece que estás utilizando correctamente la función map para iterar a través de un array de publicaciones recuperadas de Firestore y luego renderizar cada publicación como un componente personalizado llamado “Post”. El componente Post acepta props como nombre, descripción, mensaje y photoUrl para mostrar el contenido y los metadatos de la publicación.
Las declaraciones console.log muestran que la función map y el componente Post están siendo llamados y renderizados adecuadamente. Sin embargo, si tienes alguna pregunta o problema específico relacionado con este código, por favor proporciona más contexto o detalles para que podamos ayudarte mejor.