how to access multidimensional array in react

Question

I am trying to grab out the "teams" array and pull out data such as teamId, etc from it. I was wondering if any of you had any tips/help with this. I have used datas.map(data=>()) but it would not allow me to grab from teams, or maybe im doing it wrong and there is another way to map out a multidimensional array?

{
    "gameId": 3226262256,
    "platformId": "NA1",
    "gameCreation": 1575583791449,
    "gameDuration": 1526,
    "queueId": 400,
    "mapId": 11,
    "seasonId": 13,
    "gameVersion": "9.23.299.3089",
    "gameMode": "CLASSIC",
    "gameType": "MATCHED_GAME",
    "teams": [
        {
            "teamId": 100,
            "win": "Fail",
            "firstBlood": true,
            "firstTower": false,
            "firstInhibitor": false,
            "firstBaron": false,
            "firstDragon": false,
            "firstRiftHerald": false,
            "towerKills": 1,
            "inhibitorKills": 0,
            "baronKills": 0,
            "dragonKills": 2,
            "vilemawKills": 0,
            "riftHeraldKills": 0,
            "dominionVictoryScore": 0,
            "bans": [
                {
                    "championId": 111,
                    "pickTurn": 1
                },
                {
                    "championId": 25,
                    "pickTurn": 2
                },
                {
                    "championId": 24,
                    "pickTurn": 3
                },
                {
                    "championId": 235,
                    "pickTurn": 4
                },
                {
                    "championId": 238,
                    "pickTurn": 5
                }
            ]
        },
        {
            "teamId": 200,
            "win": "Win",
            "firstBlood": false,
            "firstTower": true,
            "firstInhibitor": true,
            "firstBaron": true,
            "firstDragon": true,
            "firstRiftHerald": true,
            "towerKills": 9,
            "inhibitorKills": 2,
            "baronKills": 1,
            "dragonKills": 1,
            "vilemawKills": 0,
            "riftHeraldKills": 1,
            "dominionVictoryScore": 0,
            "bans": [
                {
                    "championId": 266,
                    "pickTurn": 6
                },
                {
                    "championId": 89,
                    "pickTurn": 7
                },
                {
                    "championId": 64,
                    "pickTurn": 8
                },
                {
                    "championId": -1,
                    "pickTurn": 9
                },
                {
                    "championId": 141,
                    "pickTurn": 10
                }
            ]
        }
    ],

Then here is the code I am trying to use it in:

import React from 'react';
import './MatchHistory.css';
import Card from 'react-bootstrap/Card';

const MatchData = ({ datas }) => {


  return (
        <div>    
            <Card>
              <h5 className="card-title">Full Match data test Pull...</h5>
              <h5 className="card-title">Lane:{datas.platformId}</h5> 
              <h5 className="card-title">MapId:{datas.mapId}</h5>
              <h5 className="card-title">Mode: {datas.gameMode}</h5>
              <h5 className="card-title">Duration: {datas.gameDuration}</h5>
              <h5 className="card-title">SeasonId: {datas.seasonId}</h5>
              <h5 className="card-title">Version: {datas.gameVersion}</h5>
              <h5 className="card-title">Type: {datas.gameType}</h5>
              <h5 className="card-title">Team Data: players, bans, etc</h5>
              <h5 className="card-title">Participant info: champ, KDA, etc</h5>
            </Card>  
      </div> 
   )
}

      export default MatchData;

Answer 1

You have nested array

{
.
.
teams--
      |
      bans--
           | 
}

try this

 <h5 className="card-title">
    Team Data: players, bans, etc
    <ul>
      {datas.teams.map((team, i) => {
        return (
          <li key={i}>
            teamId:{team.teamId}//or other fields inside team
            <ul>
              {team.bans.map((ban, i) => {
                return <li key={i}>championId:{ban.championId}</li> //or other fields inside ban
              })}
            </ul>
          </li>
        );
      })}
    </ul>
  </h5>

Working Codesandbox sample

Answer 2

const obj = {"gameId":3226262256,"platformId":"NA1","gameCreation":1575583791449,"gameDuration":1526,"queueId":400,"mapId":11,"seasonId":13,"gameVersion":"9.23.299.3089","gameMode":"CLASSIC","gameType":"MATCHED_GAME","teams":[{"teamId":100,"win":"Fail","firstBlood":true,"firstTower":false,"firstInhibitor":false,"firstBaron":false,"firstDragon":false,"firstRiftHerald":false,"towerKills":1,"inhibitorKills":0,"baronKills":0,"dragonKills":2,"vilemawKills":0,"riftHeraldKills":0,"dominionVictoryScore":0,"bans":[{"championId":111,"pickTurn":1},{"championId":25,"pickTurn":2},{"championId":24,"pickTurn":3},{"championId":235,"pickTurn":4},{"championId":238,"pickTurn":5}]},{"teamId":200,"win":"Win","firstBlood":false,"firstTower":true,"firstInhibitor":true,"firstBaron":true,"firstDragon":true,"firstRiftHerald":true,"towerKills":9,"inhibitorKills":2,"baronKills":1,"dragonKills":1,"vilemawKills":0,"riftHeraldKills":1,"dominionVictoryScore":0,"bans":[{"championId":266,"pickTurn":6},{"championId":89,"pickTurn":7},{"championId":64,"pickTurn":8},{"championId":-1,"pickTurn":9},{"championId":141,"pickTurn":10}]}]}

Array(obj).forEach(item => {
    item.teams.forEach(team => {
        console.log("Team ID: " + team.teamId, team)
    })
})

Answer 3

There is generally nothing wrong with your code, and the way you are accessing the data to be rendered on your component. If you would like to iterate through teams and render it, it will not work if you do something like datas.map(data=>(...)), as this will iterate through the entire datas object.

Instead, what you should be doing is to do datas.team.map(data => ...), which will allow you to iterate through the values within team property using Array.map(), which works on arrays.

import React from 'react';
import './MatchHistory.css';
import Card from 'react-bootstrap/Card';

const MatchData = ({ datas }) => {


  return (
        <div>    
            <Card>
              <h5 className="card-title">Full Match data test Pull...</h5>
              <h5 className="card-title">Lane:{datas.platformId}</h5> 
              <h5 className="card-title">MapId:{datas.mapId}</h5>
              <h5 className="card-title">Mode: {datas.gameMode}</h5>
              <h5 className="card-title">Duration: {datas.gameDuration}</h5>
              <h5 className="card-title">SeasonId: {datas.seasonId}</h5>
              <h5 className="card-title">Version: {datas.gameVersion}</h5>
              <h5 className="card-title">Type: {datas.gameType}</h5>
              <h5 className="card-title">Team Data: {
                datas.team.map(data => {
                  return <div> 
                    // other properties and values within each object in `team`
                  <div>
                })
              }</h5>
              <h5 className="card-title">Participant info: champ, KDA, etc</h5>
            </Card>  
      </div> 
   )
}

export default MatchData;