03.06 - State & Props - Send User List data through multiple components (functional components)

App preview:

Project files:

TREBUIE CONTINUAT CU RESTUL

src/App.js

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

function App () {
  const [users, updateUsers] = useState([]);
  const [newName, updateNewName] = useState('');
  const [newEmail, updateNewEmail] = useState('');

  useEffect(() => {
    updateUsers( [
      {
        name: "lulu",
        email: "lulu@gmail.com"
      },
      {
        name: "bubu",
        email: "bubu@gmail.com"
      }
    ])
  }, []);

  const handleNameInputChange = (event) => {
    const inputValue = event.currentTarget.value;
    updateNewName(inputValue);
  }

  const handleEmailInputChange = (event) => {
    const inputValue = event.currentTarget.value;
    updateNewEmail(inputValue);
  }

  const handleFormSubmit = (event) => {
    event.preventDefault(); //prevent page refresh
    const newUser = {
        name: newName,
        email: newEmail,
    }
    updateUsers([...users, newUser]);
  }


  return(
    <div className="App">

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

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

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

      <h1>App.js</h1>

      <UserList users={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";


function UserList(props){
  return(
    <div className="UserList">
      <h2>UserList.jsx</h2>
      {
        props.users.map((user, index)=>{
          return (
            <UserItem  
              name={user.name} 
              email={user.email}
              //"key={index}"" is not a best practice.
              //preferably use index 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";

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

export default UserItem;

src/components/UserItem.css

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

Blog

03.06 - State & Props - Send User List data through multiple components (functional components)

adriangheo

Join Our Newsletter. No Spam, Only the good stuff.

Related