React Task List not updating correctly

I am making task list using only react (no backend) and when I make a new task using state it updates but the contents are messed up. I see all the data is there because of react dev tools but it isn't displaying correctly. I really can't figure out why all the data is passing but not be displayed.

This is the end result:Task List

Task Component:

import { FaTimes } from 'react-icons/fa';    const Task = ({ task, onDelete, onToggle }) => {    return (      <div        className={`task ${task.reminder ? 'reminder' : ''}`}        onDoubleClick={() => onToggle(task.id)}      >        <h3>          {task.text}{' '}          <FaTimes            style=            onClick={() => onDelete(task.id)}          />        </h3>        <p>{task.day}</p>      </div>    );  };    export default Task;

Tasks Component:

import Task from './Task';    const Tasks = ({ tasks, onDelete, onToggle }) => {    return (      <>        {tasks.map((task) => (          <Task            key={task.id}            task={task}            onDelete={onDelete}            onToggle={onToggle}          />        ))}      </>     );  };    export default Tasks;

AddTask Component:

import { useState } from 'react';    const AddTask = ({ onAdd }) => {    const [task, setTask] = useState('');    const [day, setDay] = useState('');    const [reminder, setReminder] = useState(false);      /**     * onSubmit     *     * @param {Event from submit button} e     * @returns     */    const onSubmit = (e) => {      e.preventDefault();        if (!task) {        alert('Please add a task');        return;      }        onAdd({ task, day, reminder });        setTask('');      setDay('');      setReminder(false);    };      return (      <form className="add-form" onSubmit={onSubmit}>        <div className="form-control">          <label>Task</label>          <input            type="text"            placeholder="Add task"            value={task}            onChange={(e) => setTask(e.target.value)}          />        </div>        <div className="form-control">          <label>Day & Time</label>          <input            type="text"            placeholder="Add Day & Time"            value={day}            onChange={(e) => setDay(e.target.value)}          />        </div>        <div className="form-control form-control-check">          <label>Set Reminder</label>          <input            type="checkbox"            checked={reminder}            value={reminder}            onChange={(e) => setReminder(e.currentTarget.checked)}          />        </div>          <input type="submit" value="Add Task" className="btn btn-block" />      </form>    );  };    export default AddTask;

App:

import { useState } from 'react';  import Header from './components/Header';  import Tasks from './components/Tasks';  import AddTask from './components/AddTask';    const App = () => {      const [tasks, setTasks] = useState([      {         id: 1,        text: 'Doctors Appointment',        day: 'Feb 5th at 2:30',        reminder: true,      },      {        id: 2,        text: 'Meeting at School',        day: 'Feb 6th at 1:30',        reminder: true,      },      {        id: 3,        text: 'Food Shopping',        day: 'Feb 5th at 2:30',        reminder: false,      },    ]);      /**     * Add Task     *     * @param {Task} task     */    const addTask = (task) => {        console.log(task)            const id = Math.floor(Math.random() * 10000) + 1;        const newTask = { id, ...task };        setTasks([...tasks, newTask]);    };      /**     * Delete Task     *     * @param {Task ID} id     */    const deleteTask = (id) => {      setTasks(tasks.filter((task) => task.id !== id));    };      /**     * Toggle Reminder     *     * @param {TaskID} id     */    const toggleReminder = (id) => {      setTasks(        tasks.map((task) =>          task.id === id ? { ...task, reminder: !task.reminder } : task        )      );    };      // REMINDER: you can only return one element from the function    return (      // this will return the header component that we designed      <div className="container ">        <Header />        <AddTask onAdd={addTask} />        {tasks.length > 0 ? (          <Tasks tasks={tasks} onDelete={deleteTask} onToggle={toggleReminder} />        ) : (          'No Tasks to show'        )}      </div>    );  };    export default App;

https://stackoverflow.com/questions/66631166/react-task-list-not-updating-correctly March 15, 2021 at 09:06AM