Как правильно итерировать одновременно два объекта в ReactJS

Question

Есть массив, который мы итерируем и создаем дочерние компоненты исходя из его длины. Нужно в этих компонентах вставить значения из второго массива:

  let bar ={
        first = [1,2,3,4,5]
        second = [sun, globe, flower, vanished, access]
    }

Родитель

<div>
    {bar.first.map(el=>
          <BarItem
              key={el.id}
              el={el}
          />
    )}
                   
     {second.map(foo => foo)}
</div>

Наследник

<div>        
  <p> {second[el]}</p>
</div>

Требуемый результат:

<div>        
  <p> 1 sun </p>
</div>
<div>        
  <p> 2 globe </p>
</div>
<div>        
  <p> 3 flower</p>
</div>
...

Answer 1

Например вот так:

let bar ={
        first = [1,2,3,4,5]
        second = [sun, globe, flower, vanished, access]
    }

Родитель:

<div>
   {
       bar.first.map((el, idx) => (
            <div key={`list-item-${idx}`}>
                <p>{`${el} ${bar.second[idx] || ""}`}</p>
            </div>
       )}
   }
</div>

P.S: если BarItem это компонента которая формирует элементы вида:

<div>        
  <p> 1 sun </p>
</div>

тогда вам нужно сделать вот так:

<BarItem
              key={el.id}
              el={`${el} ${bar.second[idx] || ""}`}
          />

P.S.S: el.id в вашем случае будет undefined, поэтому key будут совпадать

БЛОГ НА HUSL

Как правильно итерировать одновременно два объекта в ReactJS

Ответы (1 шт):