03.06 - State & Props - Send User List data through multiple components (functional components)
Tags: react, webdev, javascript, tutorial
Published: 2022-11-12 07:50:02



App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eaeqknxn1b0hwhpsaajl.gif)



Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzll77beg7tbaq6rsmhy.png)

TREBUIE CONTINUAT CU RESTUL


<hr/>
src/App.js
```react
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;
```
<hr/>
src/App.css
```css
.App{
  background-color: lightskyblue;
  padding: 20px 10px;
}

h1{
  margin-top: 0px; 
  margin-bottom: 6px 
}
```
<hr/>
<hr/>
src/components/UserList.jsx
```react
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;
```
<hr/>
src/components/UserList.css
```css
.UserList{
  background-color: lightsalmon;
  padding: 10px 10px;
  margin: 10px;
}
```
<hr/>
<hr/>
src/components/UserItem.jsx
```react
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;
```
<hr/>
src/components/UserItem.css
```css
.UserItem{
  background-color: lightgreen;
  padding: 10px 10px;
  margin: 10px;
}
```