Map Over An Array of Objects in React

[mickey-vershbow]

I’m trying to map over an array objects that contain other objects. See below:

JSON Data

I’m specifically trying to access the name and url properties inside the “buy_links” array.

Here’s my code so far. bestseller returns data that I’ve mapped over elsewhere in my code - the trouble is just accessing that buy_links array. Currently my code doesn’t break anything, but also doesn’t return any data.

<ul>
          {bestseller.buy_links.map(({ table }) =>
            Object.entries(table).map(({ name, url }) => (
              <li key={url} style={{ color: "white", background: "red" }}>
                <a style={{ color: "white", background: "red" }} href={url}>
                  {name}
                </a>
              </li>
            ))
          )}
        </ul>

[Sky020]

Welcome there,

This has to do with your use of Object.entries. I suggest reading up on that.

Otherwise, if you are still stuck, I suggest you plaster your code with console.logs.

Hope this helps