How to populate ToDo list with UseEffect Axios API call in React?

I’m trying to populate my ToDo list with all the tasks I get from my database with an API call. Unfortunately, nothing is showing up. My API call is working because the console.log(response.data) returns the 3 tasks in my database, but my view is not updating with the data that I got from my call. I get no errors.

import axios from "../axios";
import {useState, useEffect } from "react";
import {ToDoFull,ToDoInner,Id,Title,Description} from "./StyledComponents.js";

const Tasks = () => {
    const [tasks, setTasks] = useState([]);

    useEffect(() => {
        const fetchAllItems = async () => {
            try {
                const response = await axios.get("/tasks/all-tasks");
                if (response.data !== "") {
                    console.log(response.data); //Prints out my three objects in an array in my console. works great
                    let objects = response.data.map(JSON.stringify);
                    let uniqueSet = new Set(objects);
                    let uniqueArray = Array.from(uniqueSet).map(JSON.parse);
                    setTasks(uniqueArray);
                } else {
                }
            } catch (err) {
                console.log(err);
            }
        };
        fetchAllItems();
        return () => {
            setItems([]);
        };
    }, []);

    return (
        <>
            <ToDoFull>
                {tasks.map((task) => {
                    <ToDoInner>
                        <ID>{task.taskid}</Title>
                        <Title>{task.title}</Title>
                        <Description>{task.description}</Description>
                    </ToDoInner>;
                })}
            </ToDoFull>
        </>
    );
};

export default Tasks;

Answer

Please provide return inside tasks.map()

 <ToDoFull>
                {tasks.map((task) => {
                  return  (<ToDoInner>
                        <ID>{task.taskid}</Title>
                        <Title>{task.title}</Title>
                        <Description>{task.description}</Description>
                    </ToDoInner>);
                })}
            </ToDoFull>

Advertisement

Answer