CODEWITHSUNDEEP
javascriptreactjs
user13652920
user13652920

Reputation:

React js not rendering a object whose element is a list

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.

Upvotes: 0

Views: 36

Answers (2)

olscode
olscode

Reputation: 643

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

Upvotes: 0

Umair Ahmed
Umair Ahmed

Reputation: 562

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>

Upvotes: 4

Related Questions