02.12 React State - User List mount initial 2 users (functional components)

App preview:

Project files:

---

src/App.js

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

const App = () => {
  const [users, setUsers] = useState([
    {
      key: 1,
      name: "Joe Doe",
      email: "[e-mail]"
    },
    {
      key: 2,
      name: "Johny Schmoe",
      email: "[e-mail]"
    }
  ]);


  return(
    <div className="App">
      <h1>User List</h1>
      <span>//The users bellow are are inserted from an array of objects...</span><br/>
      <span>//as the default state values, using <b>useState</b> */</span><br/>
      <br/>
      <div>
        {
          users.map((user, index) => {
            return(<div key={user.key}>
              <span>{index} </span>
              <span>{user.name}</span> <br/>
              <span>{user.email}</span> <br/>
              <br/>
            </div>)
          })
        }
      </div>
    </div>
  )

}

export default App;

---

src/App.css

.App{
  background-color: lightskyblue;
  padding: 20px 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}