I can't see the date when i add a new Task in React.js

Question

I'm learning React and in this moment I'm stuck into a problem. I'm creating a Tracking Task and the problem is, when i add a new task from my form, the task is created but i can't see the date of my new Task.

First i will show the code and then i will add some photo to understand the problem.

App.js

import { useState } from "react";
import React from "react";
import Header from "./components/Headers";
import Tasks from "./components/Tasks";
import AddTask from "./components/AddTask";

function App() {

    const [tasks, setTasks] = useState([
    {
        id: 1,
        text: "Dentist",
        date: "23 February 2022",
        reminder: true
    },
    {
        id: 2,
        text: "Car",
        date: "24 February 2022",
        reminder: false
    },
    {
        id: 3,
        text: "Job Interview",
        date: "26 February 2022",
        reminder: true
    },
])

    const addTask = (task) =>{
        const id = Math.floor(Math.random() * 10000) + 1
        const newTask = {id, ...task}
        setTasks([...tasks, newTask])
    }


    const deleteTask = (id) => {
        setTasks(tasks.filter( (task) => task.id !== id))
    }

    const toggleReminder = (id) =>{
        setTasks(tasks.map( (task) => task.id === id ? {...task, reminder: !task.reminder} : task))
    }


    return (
        <div className="container">
            <Header />
            <AddTask onAdd={addTask}/>
            {tasks.length > 0 ? <Tasks tasks={tasks} onDelete={deleteTask} onToggle={toggleReminder}/> : "No Task To Show"}
        </div>
    );
}

export default App;

AddTask component:

import { useState } from "react";

const AddTask = ({onAdd}) =>{

    const [text, setText] = useState("")
    const [day, setDay] = useState("")
    const [reminder, setReminder] = useState(false)

    const onSubmit = (e) =>{
        e.preventDefault()

        if(!text){
            alert("Please Add Text!");
            return
        }

        onAdd({text, day, reminder})

        setText("")
        setDay("")
        setReminder(false)
    }

    return(
        <form className={"add-form"} onSubmit={onSubmit}>

            <div className={"form-control"}>
                <label id={"labelText"}>Task</label>
                <input type={"text"} placeholder={"Add Task"} id={"inputTaskText"} value={text}
                onChange={(e)=> setText(e.target.value)}/>
            </div>

            <div className={"form-control"}>
                <label id={"labelDay"}>Day and Time</label>
                <input type={"text"} placeholder={"Add Task Day & Time"} id={"inputTaskDay"} value={day}
                onChange={(e)=> setDay(e.target.value)}/>
            </div>

            <div className={"form-control form-control-box"}>
                <label>Reminder</label>
                <input
                    type={"checkbox"}
                    checked={reminder}
                    placeholder={"Add Task Reminder"}
                    id={"inputTaskReminder"}
                    value={reminder}
                    onChange={(e)=>setReminder(e.currentTarget.checked)}/>
            </div>

            <input type={"submit"} value={"Save Task"} className={"btn-Task"}/>
        </form>
    )
}

export default AddTask;

As you can see in the second Image i added correctly the task but i can't see the date. Someone can give me an explain about it?

Answer 1

It is because when you are passing the task object from AddTask component then you are send date in a day property but you while rendering date is in date property. To fix this just change this line onAdd({text, day, reminder}) to onAdd({text, date: day, reminder}) in onSubmit() handler in AddTask component.