CODEWITHSUNDEEP
javascriptdictionaryreactjs
Joshua Rajandiran
Joshua Rajandiran

Reputation: 2928

How do I properly write a table map listing in React?

I've read tutorials and followed them but I just don't seem to fully understand it yet after staring at the code for hours. Can someone give me a proper explanation on how to properly write a table using a map in React?

Sample map data:

[{"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}]

How I want it to appear like: enter image description here

Hope you guys can help me with a proper example with a good explanation of each part because I'm still currently confused even with the docs. Thanks.

Upvotes: 1

Views: 45

Answers (1)

Jacob
Jacob

Reputation: 78848

Output the beginning of the table, then map over the array for the contents, then output the end.

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

Upvotes: 2

Related Questions