How to render an array of objects in react?| Array map example in react


This is an short tutorial how to render an array of objects in React component render component. We have an array of objects data either coming from API or fixed.

For example,

employeeList = [
    {
        name: 'John',
        email: 'john@gmail.com'
    },

    {
        name: 'Ram  ',
        email: 'ram@gmail.com'
    }
]

We can use Array map function to iterate each object of an array.

Let’s see how to iterate using Array.map method to in react component.

React class component to render array of objects using map method

  • Created a react component app.jsx
  • we have array of objects stored in react state object
  • In render method, Iterated array of objects using map method and construct the result object
  • In render method add this result using javascript expression syntax
import "./styles.css";

import React, { Component } from 'react';
import { render } from 'react-dom';

export default class App extends Component {
    constructor(props) {
    super(props);
    this.state = {
      data: [{
        name: 'John',
        email: 'john@gmail.com'
    },{
        name: 'Ram  ',
        email: 'ram@gmail.com'
    }]
    }
    }
  render() {
    const emps = this.state.data;
const result=emps.map((emp,index) => <li key={index}>{emp.name}</li>);

         
    return <ul>{result}</ul>;
  }
}

This prints the ordered list of objects values

Stateless React functional component to display array of objects

This is an stateless functional component.

  • In Return functional component, We have used map to iterate and construct li object, print using javascript expression
import "./styles.css";

export default function App() {
  const employeeList = [
    {
      name: "John",
      email: "john@gmail.com"
    },

    {
      name: "Ram  ",
      email: "ram@gmail.com"
    }
  ];
  return (
    <ul>
      {this.employeeList.map((emp, index) => (
        <li key={index}>{emp.name}</li>
      ))}
      ;
    </ul>
  );
}

Conclusion

In this tutorial, You learned how to render array of objects in stateful and stateless components

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

How to convert json to/from  object in angular|Typescript 

Angular ngFor index - How to get current last even and odd index?

How to Format array of dates in typescript Angular example

In this post, you learn writing comments in Angular and typescript. You can also write single multiline and documentation comments in Typescript. This includes declare comments in Angular typescript and template HTML components.

Typescript Singleton pattern Implementation with example

Learn Typescript compiler option,tsconfig.json file

Difference between ngx-bootstrap and ng-bootstrap