Wie schreibe ich eine Tabelle korrekt in React?

Question

Ich habe Tutorials gelesen und bin ihnen gefolgt, aber ich verstehe es noch nicht vollständig, nachdem ich stundenlang auf den Code gestarrt habe. Kann mir jemand eine korrekte Erklärung geben, wie man eine Tabelle mit Hilfe einer Karte in React richtig schreibt?

Beispielkartendaten:

[{"location_id":1,"location":"HKG","description":"Hong Kong","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":2,"location":"KUL","description":"Kuala Lumpur","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0}] 

Wie ich es so erscheinen soll:

Hoffe ihr mir mit einem richtigen Beispiel mit einer guten Erklärung der einzelnen Teile helfen können, weil ich bin Noch immer verwirrt selbst mit den Docs. Vielen Dank.

Answer 1

Den Anfang der Tabelle ausgeben, dann das Array für den Inhalt abbilden und dann das Ende ausgeben.

function MyComponent(props) { 
    return (
    <table> 
     <thead> 
     <tr> 
      <th>ID</th> <th>Location</th> <th>Description</th> 
     </tr> 
     </thead> 
     <tbody> 
     { 
      props.data.map(row => (
      <tr> 
       <td>{row.location_id}</td> 
       <td>{row.location}</td> 
       <td>{row.description}</td> 
      </tr> 
     )) 
     } 
     </tbody> 
    </table> 
); 
}