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

You cannot use a for-loop within react. The loop has a void return type. It expects you to return a map i.e. `YourObject.map((it) => ...)`; — F. Müller, Jun 06 '22 at 10:07

score 1 · Answer 1 · answered Jun 06 '22 at 10:00

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

score 1 · Accepted Answer · answered Jun 06 '22 at 10:01

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

How can I map my dictionary (one element)

2 Answers2