03.07 - State & Props - Send Tasks List data through multiple components (class components)

App preview:

Project files:

---

src/App.js

import React from 'react';
import './App.css'
import TaskList from './components/TaskList';

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      tasks: [],
      newTaskName: '',
      newTaskDescription: '',
    }
  }

  componentDidMount(){
    this.setState({ tasks: [
      {
        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"
      },
    ]})
  }

  handleNameChange(event){
    const inputValue = event.target.value;
    this.setState({newTaskName: inputValue})
  }

  handleDescriptionChange(event){
    const inputValue = event.target.value;
    this.setState({newTaskDescription: inputValue})
  }

  handleFormSubmit(event){
      event.preventDefault(); //prevent page refresh
      const newTask = {
          name: this.state.newTaskName,
          description: this.state.newTaskDescription
      }
      this.updateTasksList(newTask);
  }

  updateTasksList(newTask){
    this.setState((previousState)=>{
      return {tasks: [
        ...previousState.tasks, 
        newTask
      ]}
    });
  }

  render(){

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

export default App;

---

src/App.css

src/App.css

---

---

src/components/TaskList.jsx

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

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


    render(){
        return(
            <div className='task-list'>
                <h2>TaskList.jsx</h2>
                {
                    this.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;
}