How to display data to table in React Js?

I'm trying to display some data received through API to table in React Js, data is received as object so I can't map trough it. What would be the best practice in this situation? For now the data is hardcoded, but it needs to be dynamic.

My code in CodeSandbox

export default function App() {      const data ={            "people" :[        {          "name":"John",          "last_name":"Doe",          "age":"25",          "Occupation":"driver",        },        {          "name":"Jack",          "last_name":"Brown",          "age":"24",          "Occupation":"it"        },        {          "name":"Oliver",          "last_name":"Black",            "age":"30",          "Occupation":"cto"        },      ],        "format":{"last_name":"Last Name"}    }        return (      <div className="App">       <table>         <tbody>           <tr>             <td>Name</td>             <td>John</td>             <td>Jack</td>             <td>Oliver</td>                        </tr>           <tr>             <td>Last Name</td>             <td>Doe</td>             <td>Brown</td>             <td>Black</td>                        </tr>           <tr>             <td>Age</td>             <td>25</td>             <td>24</td>             <td>30</td>                        </tr>           <tr>             <td>Occupation</td>             <td>driver</td>             <td>it</td>             <td>ceo</td>           </tr>                      </tbody>       </table>      </div>    );  }      

needs to be displayed as

Name         John     Jack      Oliver  Last Name    Doe      Brown     Black  Age          25       24        30  Occupation   driver   it        ceo  

I can't figure out how to display the data dynamically ( and also add data from format part. I would appreciate any suggestion and help, thank you.

https://stackoverflow.com/questions/65855371/how-to-display-data-to-table-in-react-js January 23, 2021 at 11:14AM