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
– Heretic Monkey, Commented Dec 28, 2022 at 18:00
You should be able to follow the Array.prototype.map() documentation here 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
– segFault, Commented Dec 28, 2022 at 18:03
Does this answer your question? Loop through an array in JavaScript — segFault
– segFault, Commented Dec 28, 2022 at 18:06

Peter Bergman · Accepted Answer · 2022-12-28 18:21:43Z

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, 2022 at 18:21

answered Dec 28, 2022 at 18:15

Peter Bergman

7071 gold badge6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vegeta Over a year ago

Wow so close yet so far thank you very much.

Sabbir Alam Pran · Accepted Answer · 2022-12-28 18:20:04Z

1

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

answered Dec 28, 2022 at 18:20

Sabbir Alam Pran

1817 bronze badges

Collectives™ on Stack Overflow

Map over an array in React

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related