skip to Main Content
import React, { useState, useEffect } from "react";
import { TaskLists } from "./TaskLists";
import { Daycard } from "./daycard";
import { getTasks, deleteTask } from "../api/task.api";

export function TaskManager() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    async function loadTasks() {
      const res = await getTasks();
      setTasks(res.data);
    }
    loadTasks();
  }, []);

  const removeTask = async (id) => {
    await deleteTask(id);
    setTasks(tasks.filter((task) => task.id !== id));
  };

  return (
    <div>
      <TaskLists tasks={tasks} removeTask={removeTask} />
      <Daycard tasks={tasks} removeTask={removeTask} />
    </div>
  );
}


import React from "react";
import { TaskCard } from "./TaskCard";

export function TaskLists({ tasks, removeTask }) {
  return (
    <div>
      {tasks.map((task) => (
        <TaskCard
          key={task.id}
          task={task}
          onDelete={() => removeTask(task.id)}
        />
      ))}
    </div>
  );
}

 import React from "react";
import { useNavigate } from "react-router-dom";
import { TaskCard } from "./TaskCard";
import { useState } from "react";

export function Daycard({ tasks, removeTask, hashv }) {
  let b = 0;
  const [hash, setHash] = useState(hashv);
  const navigate = useNavigate();

  const handleClick = () => {
    if (b === 0) {
      navigate(`/tasks-create?hash=${hash}`);
      console.log(`the hash is ${hash}`);
    }
  };

  return (
    <div
      onClick={handleClick}
      className="col pb-5 bg-light border border-dark flex-grow-1"
      style={{ height: "auto" }}
    >
      {tasks.map((task) => {
        if (task.hash === hash) {
          b = 1;
          return (
            <TaskCard
              key={task.id}
              task={task}
              onDelete={() => removeTask(task.id)}
            />
          );
        }
      })}
    </div>
  );
}

the first one is the parent component and the others are the children why I am getting the error:

TaskLists.jsx:7 Uncaught TypeError: Cannot read properties of undefined (reading ‘map’)
at TaskLists (TaskLists.jsx:7:14)
at renderWithHooks (react-dom.development.js:16305:18)

I think the issue is because the initial API call to fetch tasks might not have completed by the time these child components are rendered.

2

Answers


  1. You have to do null-exception handler for every data management.

    I add code below.

    async function loadTasks() {
      const res = await getTasks();
      //console.log(res) and check your response here.
      setTasks(Array.isArray(res) ? res : [res]);    
         //res can be null, also res is not null but res.data can be null.
    }
    loadTasks();
    

    Also, In TaskLists,

    export function TaskLists({ tasks = [], removeTask }) {
    ....
    

    I hope my answer can help you even a little

    Login or Signup to reply.
  2. When rendering your component you can check if tasks has some value.if yes render it and else if not don’t.

      return (
        <div>
    {tasks.length > 0 ?
          <>
          <TaskLists tasks={tasks} removeTask={removeTask} />
          <Daycard tasks={tasks} removeTask={removeTask} />
          </>
    :null}
        </div>
      );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search