Map over an array in React

Question

I am building an app that displays video games and various info about them, pulling data from an API. I am trying to display all of the platforms that the game is playable on, PlayStation, Xbox, etc. The JSON has an array of platforms for each game that each contain a platform object with a name (that I am trying to display). Maps really confuse me I would really appreciate someone's help with this. I will include a snippet of the JSON.

  "count": 1326,
  "next": "https://api.rawg.io/api/games?key=8d1a421af80b4f9b8650de12d9943010&page=2&search=destiny",
  "previous": null,
  "results": [
    {
      "slug": "destiny",
      "name": "Destiny",
      "playtime": 24,
      "platforms": [
        {
          "platform": {
            "id": 1,
            "name": "Xbox One",
            "slug": "xbox-one"
          }
        },
        {
          "platform": {
            "id": 18,
            "name": "PlayStation 4",
            "slug": "playstation4"
          }
        },
        {
          "platform": {
            "id": 14,
            "name": "Xbox 360",
            "slug": "xbox360"
          }
        },
        {
          "platform": {
            "id": 16,
            "name": "PlayStation 3",
            "slug": "playstation3"
          }
        }
      ],

const GameCard = ({
  game: {
    name,
    background_image,
    metacritic,
    released,
    platforms,
    platform,
    esrb_rating,
  },
}) => {
  return (
    <div className="bg-gray-600/30 m-5 p-0 rounded-xl shadow-xl shadow-gray-700 border-solid border-2 border-gray-700 max-w-[640px] hover:scale-105 ease-in duration-300">
      <img
        className="rounded-t-xl h-[360px] w-[640px] border-b-2 border-gray-600"
        alt={name}
        src={
          background_image
            ? background_image
            : "https://via.placeholder.com/640x360"
        }
      />
      <h1 className="text-center text-4xl text-gray-900 tracking-wide font-bold mt-2 font-mono">
        {name}
      </h1>
      <div className="text-gray-800 text-center font-mono py-2">
        {platforms ? platforms.map(() => <span></span>) : null}

Note that JSON is a format for sending data over the wire, like XML. Once you receive the data (via `fetch`, XHR, axios, or whatever), it's likely been parsed to JavaScript and you are no longer dealing with JSON any more. If you were, you'd be dealing with a string. — Heretic Monkey, Dec 28 '22 at 18:00
You should be able to follow the [Array.prototype.map() documentation here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to get this working... The first argument in the map callback is a single `platform` object in your case. Iterating through an array of data is not as intimidating as it seems. — segFault, Dec 28 '22 at 18:03
Does this answer your question? [Loop through an array in JavaScript](https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript) — segFault, Dec 28 '22 at 18:06

Peter Bergman · Accepted Answer · 2022-12-28T18:21:43.917

1

Per W3Schools:

map() creates a new array from calling a function for every array element.

map() calls a function once for each element in an array.

map() does not execute the function for empty elements.

map() does not change the original array.

This creates an array of names from an array of platform objects, such as results.platforms in the json snippet you showed.

platforms.map(platform => <span>{platform.platform.name}</span>)

edited Dec 28 '22 at 18:21

answered Dec 28 '22 at 18:15

Peter Bergman

472
4
16

Wow so close yet so far thank you very much. – Vegeta Dec 28 '22 at 18:20

score 1 · Answer 2 · answered Dec 28 '22 at 18:20

If you map over the platform after taking that part to the variable called platforms in your code then you can map over it like I shown below:

<div className="text-gray-800 text-center font-mono py-2">
        {platforms ? platforms.map((item) => <span key={item.platform.id}>
          {item.platform.name}
        </span>) : null }
</div>

Don't forget to insert the key inside the span tag. Which will act as a unique identifier for each span tag.

reference: Lists and Keys

Map over an array in React

2 Answers2