03.05 - State & Props - Send User List data through multiple components (class components)

App preview:

Project files:

---

src/App.js

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

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

  componentDidMount= () => {
  this.setState({
    users: [
    {
      name: "lulu",
      email: "[e-mail]"
    },
    {
      name: "bubu",
      email: "[e-mail]"
    }
    ]
  })
  }

  handleNameChange = (event) => {
  this.setState({
    newUserName: event.currentTarget.value
  })
  }

  handleEmailChange = (event) => {
  this.setState({
    newUserEmail: event.currentTarget.value
  })
  }

  handleFormSubmit = (event) => {
  event.preventDefault();

  const newUser = {
    name: this.state.newUserName,
    email: this.state.newUserEmail
  }

  this.updateUsers(newUser);

  console.log(this.state)
  }

  updateUsers = (newUser) => {
  this.setState((prevState)=>({
    users: [
    ...prevState.users,
    newUser
    ]
  }))
  console.log(this.state)
  }



  render(){
    return(
      <div className="App">

        <form onSubmit={(event)=>{this.handleFormSubmit(event)}}>
        <label htmlFor="name">Name: </label>
        <input 
          type="text" 
          name="name" 
          onChange={(event)=>{this.handleNameChange(event)}}
        ></input>

        <label htmlFor="email">Email: </label>
        <input 
          type="mail" 
          name="email" 
          onChange={(event)=>{this.handleEmailChange(event)}}
        ></input>

        <input type="submit" value="Submit Form!"></input>
        </form>

        <h1>App.js</h1>
        <UserList users={this.state.users}/>
      </div>
    )
  }
}

export default App;

---

src/App.css

.App{
  background-color: lightskyblue;
  padding: 20px 10px;
}

h1{
  margin-top: 0px; 
  margin-bottom: 6px 
}

---

---

src/components/UserList.jsx

import React from "react";
import UserItem from "./UserItem";
import "./UserList.css";

class UserList extends React.Component{
  constructor(props){
    super(props);
    this.state = {

    }
  }
  render(){
    return(
      <div className="UserList">
         <h2>UserList.jsx</h2>
         {
          this.props.users.map((user, index)=>{
            return (
              <UserItem  
                name={user.name} 
                email={user.email}
                //"key={index}"" is not a best practice.
                //preferably use value taken from directly from API
                key={index}
              />
            )
          })
        } 

      </div>  

    )
  }
}

export default UserList;

---

src/components/UserList.css

.UserList{
  background-color: lightsalmon;
  padding: 10px 10px;
  margin: 10px;
}

---

---

src/components/UserItem.jsx

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

class UserItem extends React.Component{
  constructor(props){
    super(props);
    this.state = {

    }
  }

  render(){

    return(
      <div className="UserItem">
          <h2>UserItem.jsx</h2>
          <div>{this.props.name}</div>
          <div>{this.props.email}</div>
      </div>  
    )
  }
}

export default UserItem;

---

src/components/UserItem.css

.UserItem{
  background-color: lightgreen;
  padding: 10px 10px;
  margin: 10px;
}