How to render elements from array of objects in React js



This post will explain you how to render array of objects in react js.

In React Js we have a function called "Map" using which we can render list of objects.

below is the sample code to render list of objects..

 class App extends Component {

  render() {

    var studentModel = [
      {
        'studentId':101,
        'studentName':'Sam',
        'dob':'10-05-1990',
        'address1':'singapore',
        'address2':'tokyo'
      },
      {
        'studentId':102,
        'studentName':'Ravikanth',
        'dob':'15-05-2000',
        'address1':'srilanka',
        'address2':'trichura'
      },
      {
        'studentId':103,
        'studentName':'Sunder',
        'dob':'20-05-2010',
        'address1':'indonesia',
        'address2':'kuwait'
      }
    ];
    const listItems = studentModel.map((student) => (
      <tr>
        <td> {student.studentName} </td>
        <td> {student.dob} </td>
        <td> {student.address1} </td>
        <td> {student.address2} </td>
      </tr>
    ));

    return (
      <div>
        <table>{listItems}</table>
      </div>
    );
  }
}

export default App;

 

Labels: render list in react js, render object array in react js
Subscribe

Receive Quality Tutorials Straight in your Inbox by submitting your Email below:

Delivered by FeedBurner

Protected by Copyscape Duplicate Content Checker