Aquí está el código:

 //Create conversation function. function createConversation(recipients) { setConversations(prevConversations => { return [...prevConversations, {recipients, messages: []}]; }); } //Formatted conversations. const formattedConversations = conversations.map(conversation => { const recipients = conversation.recipients.map(recipient => { const contact = contacts.find(contact => { return contact.id === recipient; }); const name = (contact && contact.name) || recipient; return {id: recipient, name}; }); return {...conversation, recipients}; }); //Formatted conversations [END] //value variable. const value = { conversations: formattedConversations, createConversation, }; //returning ConversationContext.Provider context. return ( <ConversationContext.Provider value={value}> {children} </ConversationContext.Provider> );

Aquí no puedo mapear mis conversaciones en la interfaz de usuario

Aquí está el código que usé en la interfaz de usuario:

 export default function Conversations() { const {conversations} = useConversation; return ( <ListGroup variant="flush"> {conversations.map((conversation, index) => ( <ListGroup.Item key={index}> {(conversation || []).map(r => r.name).join(', ')} </ListGroup.Item> ))} </ListGroup> ); }