React example - Using the map iterator to render lists

react-listy.js

import React from 'react';
import ReactDOM from 'react-dom';

class Listy extends React.Component {
  render() {
    const users = ['John','Jill','Joan','Jenny'];

    // // the map iterator below is identical to this for loop
    // const list = [];
    // for(let i = 0; i < users.length; i++) {
    //   list.push(<li>{users[i]}</li>);
    // }

    const list = users.map(u => {
      return <li>{u}</li>;
    });

    return (
      <ul>
        {list}
      </ul>
    );
  }
}
ReactDOM.render(
  <Listy />,
  document.getElementById('root')
);