How can I map my dictionary (one element)

Question

I'm working on reactJS and I try to display information from my dictionary, but it doesn't work.

I already did a loop with "for" but I can't display it so I tried to do a map function.

There is my code :

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>
    );
};

I want to display ludo, then luda in a map function.

I already tried to do my for loop function in a return but it seems impossible.

I tried to follow this example:

How to map a dictionary in reactJS?

but it prints all the elements. I just want to display (or take) the from

(The console.log in my test function prints the corrects elements but I'm not able to return them).

Thank you for yours answers

Answer 1

What you want to do is put the map function in the return

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 : ''
    },


]);

export const Messagerie = () => {

    const obj = [{
        foo: 'bar',
        baz: 42
      }]
        
    return (
        <Layout title="Messagerie" loggedIn={true} accountType={parentCookies.name}>
            <Seo title="Messagerie" />

            <div>
                {Mails.map((Mail, index) => {
                    return <h1 key={index}>{Mail.from}</h1>
                 })}
            </div>
        </Layout>
    );
};

Answer 2

Simply map the array and select the from key for each item.

Codesandbox

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 = () => {
  return Mails.map((mail, i) => <div key={i}>{mail.from}</div>);
}