03.05 - State & Props - Send User List data through multiple components (class components)
Tags: javascript, react, tutorial, webdev
Published: 2022-11-12 07:49:28

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


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



<hr/>
src/App.js
```react
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: "lulu@gmail.com"
    },
    {
      name: "bubu",
      email: "bubu@hotmail.com"
    }
    ]
  })
  }

  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;
```
<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";

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;
```
<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";

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;
```
<hr/>
src/components/UserItem.css
```css
.UserItem{
  background-color: lightgreen;
  padding: 10px 10px;
  margin: 10px;
}
```