CODEWITHSUNDEEP
javascriptreactjsreact-native
Mangux
Mangux

Reputation: 413

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!

Upvotes: 2

Views: 84

Answers (3)

benjamin Rampon
benjamin Rampon

Reputation: 1416

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>
);

Upvotes: 3

whostolemyhat
whostolemyhat

Reputation: 3123

Use the second parameter to map, index, to get the correct image and key.

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

            <span className="textoIconoIndependiente">{ equipo.key[i] }</span>
          </div>
      </div>
    )}
  </div>
);

Upvotes: 1

Tholle
Tholle

Reputation: 112787

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>
);

Upvotes: 2

Related Questions