Как пройти ключ-значение в reactjs

Я пытаюсь эффективно провести тур по ключу-значению в массиве в reactjs.

Однако я не знаю, как отобразить «ключевой» массив без создания другой функции карты.

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.info(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>
);

Я хочу показать это в диапазон имени класса textIconoIndependiente.

Спасибо!

Передайте индекс в функции карты, а затем вы можете дать src = {images[index]}, должно работать, я думаю

Utsav Patel 19.02.2019 16:08

Думаю, так ваша модель была бы более внятной const equipos = [{key: 'Real Madrid', image: '...' }, {key : 'Manchester United' , image: '...'} ]

nubinub 19.02.2019 16:14
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
66
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Второй аргумент, передаваемый функции map, — это индекс, который можно использовать для чтения правильного 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>
);

Используйте второй параметр для map, index, чтобы получить правильное изображение и ключ.

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

Я не уверен, что ваши данные правильно отформатированы.

Я предлагаю вам другой формат. Таким образом, можно отобразить ваше изображение и название клуба только с одной картой.

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

Другие вопросы по теме