JavaScript How to traverse key-value in reactjs

I'm trying to efficiently make a key-value tour in an array in reactjs.

However, I do not know how to display the "key" array without creating another map function.

const equipos = [
  {
    key: [
      'Real Madrid',
      'Manchester United',
      'Champions League',
      'English Premier League',
      'Bayern Munchen',
      'Juventus',
      'Arsenal',
    ],
    images: [
      'http://as00.epimg.net/img/comunes/fotos/fichas/equipos/large/1.png',
      'https://4.bp.blogspot.com/_Z_YWTFNHUvw/TQDBKNXdwcI/AAAAAAAACI0/COhwIG2PkFA/s320/Manchester-United%255B1%255D.png',
      'http://www.stickpng.com/assets/images/5842fe06a6515b1e0ad75b3b.png',
      'https://i.pinimg.com/originals/f1/44/fc/f144fc61d0b0ed7716d740aa9deefb07.png',
      'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/FC_Bayern_M%C3%BCnchen_logo_%282017%29.svg/1200px-FC_Bayern_M%C3%BCnchen_logo_%282017%29.svg.png',
      'http://as00.epimg.net/img/comunes/fotos/fichas/equipos/large/29.png',
      'https://i.pinimg.com/originals/98/32/8b/98328b1d64c5f93ef5eceea7586430d1.png',
    ],
  },
];

console.log(equipos.images)

const IconosSeccion = () => (
  <div className="containerIconosSeccion">
    <div className="parentIconos" />
    {equipos.map(equipo => (
      <div>
        {equipo.images.map(image => (
          <div className="backgroundIconoIndependiente">
            <img alt="#" className="iconoIndependiente" src={image} />

            <span className="textoIconoIndependiente">Real madrid</span>
          </div>
        ))}
      </div>
    ))}
  </div>
);

I want to show it in the span of the classname textIconoIndependiente.

Thank you!

The second argument passed to the map function is the index, which you could use to read the correct key.

const IconosSeccion = () => (
  <div className="containerIconosSeccion">
    <div className="parentIconos" />
    {equipos.map(equipo => (
      <div>
        {equipo.images.map((image, index) => (
          <div className="backgroundIconoIndependiente">
            <img alt="#" className="iconoIndependiente" src={image} />
            <span className="textoIconoIndependiente">{equipo.key[index]}</span>
          </div>
        ))}
      </div>
    ))}
  </div>
);

I'm not sure your data is well formatted.

I suggest you another format. In that way, It's possible to render your image and the name of the club with only one map.

const equipos = [
      {name:'Real Madrid',image:'http://as00.epimg.net/img/comunes/fotos/fichas/equipos/large/1.png',},
      {name:'Manchester United',image:'https://4.bp.blogspot.com/_Z_YWTFNHUvw/TQDBKNXdwcI/AAAAAAAACI0/COhwIG2PkFA/s320/Manchester-United%255B1%255D.png',},
      {name:'Champions League',image:'http://www.stickpng.com/assets/images/5842fe06a6515b1e0ad75b3b.png',},
      {name:'English Premier League',image:'https://i.pinimg.com/originals/f1/44/fc/f144fc61d0b0ed7716d740aa9deefb07.png',},
      {name:'Bayern Munchen',image:'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/FC_Bayern_M%C3%BCnchen_logo_%282017%29.svg/1200px-FC_Bayern_M%C3%BCnchen_logo_%282017%29.svg.png',},
      {name:'Juventus',image:'http://as00.epimg.net/img/comunes/fotos/fichas/equipos/large/29.png',},
      {name:'Arsenal',image:'https://i.pinimg.com/originals/98/32/8b/98328b1d64c5f93ef5eceea7586430d1.png'}
];

const IconosSeccion = () => (
  <div className="containerIconosSeccion">
    <div className="parentIconos" />
    {equipos.map(equipo => (
      <div>
          <div className="backgroundIconoIndependiente">
            <img alt="#" className="iconoIndependiente" src={equipo.image} />

            <span className="textoIconoIndependiente">{equipo.name}</span>
          </div>
      </div>
    ))}
  </div>
);