Confusion with mapping arrays of objects JS / Next / React

Question

Edit: re-wrote question to make it cleaner: I have data like this,

[
  { winrate: '56.67' },
  [
    {
      bout: "Bout 5: Europe's  Qualifiers",
      wins: '2',
      role: 'Alternate'
    },
    {
      pokemon: 'Quagsire',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/195.png'
    },
    {
      pokemon: 'Venusaur',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/3.png'
    },
    {
      pokemon: 'Beedrill',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/15.png'
    },
    {
      pokemon: 'Mawile',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/303.png'
    },
    {
      pokemon: 'Escavalier',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/589.png'
    },
    {
      pokemon: 'Mandibuzz',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/630.png'
    }
  ],
  [
    {
      bout: "Bout 4: Europe's  Qualifiers",
      wins: '1',
      role: 'Alternate'
    },
    {
      pokemon: 'Quagsire',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/195.png'
    },
    {
      pokemon: 'Ninetales_alolan',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/ninetales-alola.png'
    },
    {
      pokemon: 'Beedrill',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/15.png'
    },
    {
      pokemon: 'Sealeo',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/364.png'
    },
    {
      pokemon: 'Jellicent',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/593.png'
    },
    {
      pokemon: 'Venusaur',
      sprite: 'https://thesilphroad.com/img/pokemon/icons/96x96/3.png'
    }
  ], ...etc it goes on for a while.

I'm trying to map it in a react component like this:

const Teams = ({ teams }) => {
  let pokemap = teams.map((team, index) => (
    <React.Fragment key={index}>
      <br />
      <div class="container">
        {team.map((pokemon) => (
          <React.Fragment key={pokemon.pokemon}>
            <br /> <div class="bout">{pokemon.bout}</div>
            <div class="child">
              <img src={pokemon.sprite} />
              <p>{pokemon.pokemon}</p>
            </div>
          </React.Fragment>
        ))}
      </div>
      <br />
    </React.Fragment>
  ));
  return (
    <div>
      {teams.role}
      {teams.winrate}
      {pokemap}
    </div>
  );
};

export default Teams;

I get the error that the nested team.map is not a function, because after the first map, the nested map is just an array containing an object instead of multiple arrays but I have no idea how to get around it.

EDIT: FIXED :) Here's the new component:

const Teams = ({ teams }) => {
  console.log(teams);
  let pokemap = teams.slice(1).map((team, index) => (
    <React.Fragment key={index}>
      <br />{" "}
      <div class="container">
        <div class="bout">{team[0].bout}</div>{" "}
        <div>
          Score:
          <br />
          {team[0].wins && team[0].wins + "-"}
          {team[0].wins && 3 - team[0].wins}
        </div>
        <br />
        {Array.isArray(team) &&
          team.slice(1).map((pokemon) => (
            <React.Fragment key={pokemon.pokemon}>
              <div class="child">
                <img src={pokemon.sprite} />
                <p>{pokemon.pokemon}</p>
              </div>
            </React.Fragment>
          ))}
      </div>
    </React.Fragment>
  ));
  return (
    <div>
      Win Rate: {teams[0].winrate}%{pokemap}
    </div>
  );
};

try adding a console.log(teams); before let pokemap = teams.map((team, index) ..., this way you can visualize the structure of your teams array. and if the mapping is KO then you know where to start ( Also You are using const team = []; so teams will be [[],..] and not [{},..] ) — Zouhair Dre
– Zouhair Dre, Commented Sep 15, 2021 at 8:46
I guess the map() that stops working is the nested one: team.map((pokemon) => ...). That's because teams will be an array of objects, not an array of arrays and consequently team will be an object not an array. — lbsn
– lbsn, Commented Sep 15, 2021 at 8:49
Add the console.log(teams) first so you can be sure of this array's structure :) — Zouhair Dre
– Zouhair Dre, Commented Sep 15, 2021 at 8:51
added console.log(teams) - also changed the const to let on the arrays.. will update main post. — Liiaam93
– Liiaam93, Commented Sep 15, 2021 at 9:09
@lbsn is correct, but my head hurts and I have no idea how to fix it lol. — Liiaam93
– Liiaam93, Commented Sep 15, 2021 at 10:21

lbsn · Accepted Answer · 2021-09-15 10:49:55Z

1

Since your data contains both objects and arrays you need to check within the first iteration level if the current item is an array and only call map() in that case:

{Array.isArray(team) && team.map((pokemon) => (
  <React.Fragment key={pokemon.pokemon}>
    <br /> <div class="bout">{pokemon.bout}</div>
    <div class="child">
      <img src={pokemon.sprite} />
      <p>{pokemon.pokemon}</p>
    </div>
  </React.Fragment>
))}

answered Sep 15, 2021 at 10:49

lbsn

2,4221 gold badge13 silver badges20 bronze badges

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

1 Comment

Liiaam93 Over a year ago

Amazing, I used this combined with teams.slice(1).map((team, index) => ( ... since the first part of the data isn't formatted the same.

Collectives™ on Stack Overflow

Confusion with mapping arrays of objects JS / Next / React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related