React example - Using the map iterator to render lists (with keys)

react-listy-with-keys.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 key={i}>{users[i]}</li>);
    // }

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

    return (
      <ul>
        {list}
      </ul>
    );
  }
}

ReactDOM.render(
  <Listy />,
  document.getElementById('root')
);