Estoy aprendiendo React y he mapeado con éxito los títulos de las publicaciones a un div en la página. También necesito tomar el "ID de usuario" de las publicaciones y obtener el nombre del usuario del estado de los usuarios y agregarlo a un

en el div. Puedo enviar el ID de usuario a una función que está configurada para devolver el usuario correspondiente pero no aparece en la página. Agradecería una revisión de mi código para ver dónde me estoy equivocando. Puedo cerrar sesión en la consola del usuario correcto, pero no aparece en el HTML. El segundo

en la sección es el que no se está completando. Tendría que hacer eso en los comentarios más adelante, así que por ahora solo asigné un HTML interno estático para eso. aquí está mi código que tengo. Gracias por adelantado.

 export default function Posts(name) { const [posts, setPosts] = useState([]); const [comments, setComments] = useState([]); const [users, setUsers] = useState([]) // get Posts useEffect(() => { getPosts() .then(items => { setPosts(items) }) // Get all Users getUsers() .then(users => { setUsers(users) }) // Get all comments getComments() .then(comments =>{ setComments(comments) }) }, []) // get individual user by userId const getPostAuthor = (userid)=> { users.filter((item) =>{ if ( item.id === userid){ console.log(item.name) return item.name } }) } return ( <PostsSection> { posts.map(item => <Post><PostTitle key ={ item.title }> { item.title } </PostTitle><PostBody key={item.body}>{item.body}</PostBody><PostFooter><p>comments:4</p><p>{getPostAuthor(item.userId)}</p></PostFooter></Post>)} </PostsSection> ) }