import React from "react";
import "./App.css"

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      users : [],
      newUserName : ""
    }
  }

  componentDidMount(){
    this.setState({
      users: [
        {
          name: "Joe Doe",
          email: "joe@doe.com"
        },
        {
          name: "Johny Schmoe",
          email: "johny@schmoe.com"
        }
      ]
    })
  }


  render(){
    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>setState</b> */</span><br/>
        <br/>
        <div>
          {
            this.state.users.map((user, index) => {
              return(<div>
                <span>{index} </span>
                <span>{user.name}</span> <br/>
                <span>{user.email}</span> <br/>
                <br/>
              </div>)
            })
          }
        </div>
      </div>
    )
  }
}

export default App;

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