Визуализировать массив объекта React

Question

Я рендерил значения из массива объектов. Я сделал счетчик, чтобы посчитать, сколько объектов в массиве, чтобы зациклить их всех, но он зацикливается только один раз. После возвращения я знаю, что перерывы в работе функций, но я не знаю, как это сделать иначе. Проверьте мою песочницу, я воссоздал свою проблему https://codesandbox.io/s/goofy-easley-w5rrg

  const displayData=(data)=>{
    let counter = 0
    for (let i = 0; i < data.length; i++) {
      if (counter <= data.length+1) {
        counter++ 
        return Object.keys(data[i]).map((value,ids)=>{
              return <span key={ids}>{data[i][value]} </span>
           })
        }
      }

  }

Answer 1

Сохраните все значения JSX в массив и верните:

let result = [];
// ...
result.push(Object.keys(data[i]).map(...));
// ...
return result;

Answer 2

Вы можете использовать вложенные map().Я думаю, вам не нужна переменная counter.

const displayData=(data)=>{
    return (
        data.map(x => 
           Object.keys(x).map((value, ids) => (
               <span key={ids}>{x[value]} </span>
           )
        )
     )
  }

Answer 3

const displayData = data => {
  return Object.keys(data).map(el => {
    return el.value;
  })
}