渲染对象React数组

Question

I'm rendering values from an array of objects . I made a counter to count how many objects in array to loop all of them , but it only loops once. I know after I'm returning , function breaks, but I don't know how to do it other way. Check my sandbox, I recreated my problem 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

Save all the JSX values into an array and return that:

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

Answer 2

You can use nested map() . I think you don't need counter variable.

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