Click here to Skip to main content
13,900,697 members
Rate this:
 
Please Sign up or sign in to vote.
See more:
this.state.data =[
{'name':'Fred','status':'Available','age':'15','country':'Canada'},
{'name':'George','status':'Unavailable','age':'17','country':'Russia'},
{'name':'Bill','status':'Unavailable','age':'61','country':'USA'}
];

I want to map over this array and return a html in react

Like:

<tr>
  <td>Fred</td>
  <td>Available</td>
  <td>15</td>
  <td>Canada</td>
</tr>
<tr>
  <td>George</td>
  <td>Unavailable</td>
  <td>17</td>
  <td>Russia</td>
</tr>
<tr>
  <td>Bill</td>
  <td>Unavailable</td>
  <td>61</td>
  <td>USA</td>
</tr>


But the array keys could be anything. It could be totally different array with different key value pairs. It doesn't have to be name or status. How would I do it?

What I have tried:

I don't know where to go after this

{this.state.data.map((rowData) => {
    let keys = Object.keys(rowData);
})}
Posted
Updated 15-Mar-19 22:50pm

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 3

data =[
{'name':'Fred','status':'Available','age':'15','country':'Canada'},
{'name':'George','status':'Unavailable','age':'17','country':'Russia'},
{'name':'Bill','status':'Unavailable','age':'61','country':'USA'}
];

data.map((rowData) => { return "<tr>\n" + Object.values(rowData).map(item=> {return " <td>" + item + "</td>\n"}).join(''); + "</tr>\n"}).join('');


Better solution, remove commas with join.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web06 | 2.8.190306.1 | Last Updated 16 Mar 2019
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100