ReactJS Part 6 Rendering a List

 ES 6 Map can be use to iterate through a collection of data.

import React, {useState} from "react";
import "./style.css";

export default function App() {
  const [contacts,setContact] = useState([
    {name: 'Shalvin', key:1},
    {name: 'Joy', key:2},
    {name: 'Arun', key:3}
  ]);
  return (
    <div>
     {contacts.map( (contact) =>
        <div>{contact.key} - {contact.name} </div>

     )}
    </div>
  );
}