Estoy haciendo un blog con react, next.js y json-server. He llegado tan lejos como para cargar dinámicamente publicaciones de blog y otra interfaz de usuario, pero ahora, cuando también intento cargar dinámicamente los comentarios, no funciona.

El componente en cuestión es este.

 const Comments = ({ id }) => { const [com, setCom] = useState([]); useEffect(() => { const getComments = async () => { const comment = await fetchPost(id); if (comment["comments"].length == 0) return; const comments = [...comment["comments"]]; setCom([...comment["comments"]]); }; getComments(); }, []); return ( <div> {com.map((p) => { console.log(p.comment); <Comment key={p.id} comment={p.comment} />; })} </div> ); };

Sé que se está llamando al componente y tengo la información mientras lo registro en la consola dentro del mapa. Lo que no entiendo es por qué no se procesa, ya que es una copia casi al carbón de cómo represento las publicaciones del blog.

Aparte de lo anterior, he intentado lo siguiente:

• sintaxis comprobada
• Ejecutar <Comment/> con y sin clave
• poner cadenas directamente dentro del componente com.map, en lugar de p.comment == no se procesa
• estado de elevación y useEffect hasta <Post/>