How to Map Over An Array of Objects in React

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>

Hi Mickey,
it’s not as complicated as your current approach. There is only one array you have to loop over and you can access everything else with dot notation:

const copy = bestseller.buy_links.map(el =>
  <a href={el.table.url}>{el.table.name}</a>)

Thank you so, so much! This is amazing.

1 Like