React js not rendering a object whose element is a list

Question

I have been trying to render the P_words list element word with react using map:

const f_data = {
key: 2412,
reviewed: 100,
rating:4,
P_words: [{
    word: "Coolx",
    freq: 5
},
{
    word: "Dumbf",
    freq: 6
}

]

So this is the code inside my function to render this list:

          <ul>
        Cool
        {f_data.P_words.map((obj) => {
          <li key={obj.freq}>{obj.freq}</li>;
        })}
      </ul>

I checked the DOM it shows cool but it shows a empty ul tag. Sorry if this is kind of vague.

Umair Ahmed · Accepted Answer · 2021-07-08 18:26:32Z

4

You're missing a return from .map, if you choose to use curly braces, you need to explicitly return something

      <ul>
        Cool
        {f_data.P_words.map((obj) => {
          return <li key={obj.freq}>{obj.freq}</li>
        })}
      </ul>

answered Jul 8, 2021 at 18:26

Umair Ahmed

5646 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

olscode · Accepted Answer · 2021-07-08 18:34:38Z

0

You can try directly using parethesis:

<ul>
        Cool
        {f_data.P_words.map((obj) => (
          <li key={obj.freq}>{obj.freq}</li>;
        ))}
      </ul>

Because it miss the return

answered Jul 8, 2021 at 18:34

olscode

6431 gold badge6 silver badges19 bronze badges