import React, { useState, useEffect, Suspense } from "react";
import "./App.css";
const TodoList = React.lazy(() => import("./TodoList"));
const App = () => {
const [todos, setTodos] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(
"https://jsonplaceholder.typicode.com/todos?_limit=100"
);
const data = await response.json();
setTodos(data);
} catch (error) {
console.log(error);
}
};
fetchData();
}, []);
return (
<div className="flex justify-center item-center flex-col text-center">
<h1>List</h1>
<Suspense fallback={<p>Loading...</p>}>
<TodoList todos={todos} />
</Suspense>
</div>
);
};
export default App;