Why rendering HTML elements with data from array using Array.map() works but from Object using Object.keys().forEach() doesn't?

Question

I am interested to know why this code - rendering HTML elements with data from array using Array.map() - works fine and elements appear on screen:

<div className="container">
    {data.map((d) => (
        <div className="item">
            <img 
            src={d.img} 
            alt=""/>
            <h3>{d.title}</h3>
        </div>
    ))}
</div>

but this code - rendering HTML elements with data from an object using forEach() - doesn't work and nothing appears on screen although no error is thrown and console.log()'s within <div className="betCard"></div> work fine:

<div className="container">
    {Object.keys(data).forEach((bet) => (
        <div className="betcard">
            <p>{data[bet]["name"]}</p>
            <p>{data[bet]["oddsDecimal"]}</p>
            <p>{data[bet]["genericName"]}</p>
        </div>
    ))}
</div>

The `.forEach()` method ignores any returned values from its callback function. — Pointy, Jul 22 '21 at 15:07
Q: I have a function that works, and another that doesn't work. A: Use the one that works. — Buh Buh, Jul 22 '21 at 15:13
""how could I get the second function to work correctly" " um, use map.... not forEach. ;) — epascarello, Jul 22 '21 at 15:22

score 2 · Accepted Answer · answered Jul 22 '21 at 15:07

map returns a list of results, while forEach always returns undefined (so nothing gets passed to React to render). The latter code could be successfully written as:

<div className="container">
    {Object.keys(data).map((bet) => (
        <div className="betcard">
            <p>{data[bet]["name"]}</p>
            <p>{data[bet]["oddsDecimal"]}</p>
            <p>{data[bet]["genericName"]}</p>
        </div>
    ))}
</div>

score 1 · Answer 2 · answered Jul 22 '21 at 15:09

1

Foreach doesn't return the result, map does.

{Object.keys(data).map((bet) => (

would solve the issue.

answered Jul 22 '21 at 15:09

sid

1,779
8
10

Why rendering HTML elements with data from array using Array.map() works but from Object using Object.keys().forEach() doesn't?

2 Answers2