Outputting list in React JS

Till now we have seen how to output only one item which a single employee. Our state included only a single employee and we displayed the employee details on our webpage, but now lets see how we can display multiple employees on the webpage.

Our state will send details of multiple employees and we have to display those on webpage.


App.js

Look at the code below. Our state employees holds information for three employees and their profession. This way we can have multiple records of the same kind of information. Now in the render() method we need to pass this data to props. Remember that our state holds an array employees . To get individual element from the state we can simply use their indexes like this : name = {this.state.persons[0].name}. We simply have to write each n every index to get information from all elements from our array in state.

import React, { Component } from ‘react’; import ‘./App.css’; import Employee from ‘./Employee’; class App extends Component { state = { employees: [ { name: ‘Atul’, profession: ‘UI Developer’ }, { name: ‘John’, profession: ‘Backend Developer’ }, { name: ‘Steve’, profession: ‘Database Developer’ } ] } render () { return (

Hi, I’m a React App

This is really working!

); } } export default App;

Employee.js