Estoy trabajando en reactJS e intento mostrar información de mi diccionario, pero no funciona.

Ya hice un bucle con "for" pero no puedo mostrarlo, así que intenté hacer una función de mapa.

Ahí está mi código:

 const Mails = Object.freeze([ { from: "Ludo", to: "Guillaume", when: "12:05:2022", Subject: "Absence", Message: "ptit tube", Vu : '' }, { from: "Luda", to: "Guillaume", when: "12:05:2022", Subject: "Absence", Message: "ptit tube", Vu : '' }, ]); const test = () => { for (var index = 0; index < Mails.length; index++) { console.log(Mails[index]["from"]) // return( // <h1>Mails[index]["from"] </h1> // ) } return ( <h1>a</h1> ); }; export const Messagerie = () => { const obj = [{ foo: 'bar', baz: 42 }] const list_mails = () => { for (var index = 0; index < Mails.length; index++) { console.log(Mails[index]["from"]) // return( // <h1>Mails[index]["from"] </h1> // ) } }; return ( <Layout title="Messagerie" loggedIn={true} accountType={parentCookies.name}> <Seo title="Messagerie" /> <div> {list_mails()} </div> </Layout> ); };

Quiero mostrar ludo, luego luda en una función de mapa.

Ya intenté hacer mi función de bucle for en un retorno pero parece imposible.

Traté de seguir este ejemplo:

¿Cómo mapear un diccionario en reactJS?

pero imprime todos los elementos. Solo quiero mostrar (o tomar) el de

(La consola.log en mi función de prueba imprime los elementos correctos pero no puedo devolverlos).

gracias por tus respuestas