03.08 - State & Props - Send TasksList data through multiple components (class components)

App preview:

Project files:

---

src/App.js

import React, { useEffect, useState } from 'react';
import './App.css'
import TaskList from './components/TaskList';

function App(){
  const [tasks, updateTasks] = useState([]);
  const [newTaskName, updateName] = useState('');
  const [newTaskDescription, updateDescription] = useState('');

  useEffect(() => {
    updateTasks( [
      {
        name: "Buy milk",
        description: "Go to shop and buy one carton of milk. We're out.",
      },
      {
        name: "Take out the dog",
        description: 'Take Buddy out at 07:00, 12:00p.m., and 6.p.m.',
      },
      {
        name: "Clean car",
        description: "Wash the outside and thoroughly vacuum the outside"
      }
    ])
  }, []);


  const handleNameChange = (event) => {
    const inputValue = event.target.value;
    updateName(inputValue)
  }

  const handleDescriptionChange = (event) => {
    const inputValue = event.target.value;
    updateDescription(inputValue)
  }

  const handleFormSubmit = (event) => {
      event.preventDefault(); //prevent page refresh
      const newTask = {
          name: newTaskName,
          description: newTaskDescription
      }
      updateTasks([...tasks, newTask]);
  }


  return (
    <div className="App" >
      <h1>App.js</h1>
      <form onSubmit={(event)=>{handleFormSubmit(event)}} >
        <p>Add a new task:</p>
        <br/>
        <label htmlFor="name">Task name:</label>
        <br/>
        <input 
            type="text" 
            name="name" 
            value={newTaskName} 
            onChange={(event)=>{handleNameChange(event)}}
        />
        <br/>
        <label htmlFor="description">Description:</label>
        <br/>
        <input 
            type="text" 
            name="description" 
            value={newTaskDescription} 
            onChange={(event)=>{handleDescriptionChange(event)}}
        />
        <br/>
        <input type="submit" value="Submit form!"/>
      </form>  
      <TaskList tasks={tasks}/>
    </div>
  );


}


export default App;

---

src/App.css

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


h1{
  margin: 0px;
}

form *{
  margin: 2px;
}

---

---

src/components/TaskList.jsx

import React from 'react';
import TaskItem from './TaskItem';
import "./TaskList.css"

function TaskList(props){

    console.log(props)
    return(
        <div className='task-list'>
            <h2>TaskList.jsx</h2>
            {
                props.tasks.map((task, index) => {
                    return <TaskItem 
                        name = {task.name}
                        description = {task.description}
                        key = {index}
                    />
                }) 
            }   
        </div>
    );
}

export default TaskList;

---

src/components/TaskList.css

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

h2{
    margin: 0px;
}

---

---

src/components/TaskItem.jsx

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

function TaskItem(props){
    const { name, description } = props;

    return (
        <div className="task-item">
            <div style={{display:"flex", justifyContent:"center"}}>
                <b>TaskItem.jsx</b>
            </div>
            <p><b>{ name }</b></p>
            <p>{ description }</p>
        </div>
    );
}


export default TaskItem;

---

src/components/TaskItem.css

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


h3{
    margin: 0px;
}