Array.map returning cannot read property 'map' of undefined

Question

I've been trying to access and display "teams" in this array, however when I try to map it out to display the data I get the error: "cannot read property 'Map' of undefined. Whenever I display other portions of the array, it works fine. I am just having issues with the "teams" array within the array. Any help is appreciated<3 thanks.

Here is my array of data:

{
    "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
                }
            ]
        }
    ],

And my code I am trying to map it out in:

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

const MatchData = ({ datas }) => {
console.log('data: ' + 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>
               {datas.teams.map(data => (            
               <h5 className="card-title">Type: {data.teamId}</h5>))}
              <h5 className="card-title">Participant info: champ, KDA, etc</h5>
            </Card>  
      </div> 
   )
}

      export default MatchData;

Answer 1

Try this

{datas.teams && datas.teams.map(({teamId})=> (            
  <h5 className="card-title" key={teamId}>Type: {teamId}</h5>))
}

Answer 2

You can access the team id of the first team by using something like this

data["teams"][0]["teamId"]

Hope this helps

Answer 3

Your formatting/syntax was slightly off. Try

{datas.teams.map(data => <h5 className="card-title">Type: {data.teamId}</h5>)}

or

{datas.teams.map(data => {
     return <h5 className="card-title">Type: {data.teamId}</h5>
})}

Answer 4

Problem is here,

{data.teams.teamId}

You don't have teams object. You should be doing this,

{data.teamId}

For the extra care, you can do this,

{datas.teams && datas.teams.length && datas.teams.map(data => (            
    <h5 className="card-title">Type: {data.teamId}</h5>)
)}

Answer 5

The map function only applicable for Array. If the array is in this format then you can apply map operation like this to get the teams.

 let sampleArray = [{ "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 } ] } ]}]; let teamArray = sampleArray.map(ele => ele.teams)[0]; console.log(teamArray);