import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [tasks, setTasks] = useState([]);
useEffect(() => {
axios.get('http://127.0.0.1:5000/tasks')
.then(response => setTasks(response.data))
.catch(error => console.log(error));
}, []);
return (
<div className="App">
<h1>Task List</h1>
<ul>
{tasks.map(task => (
<li key={task.id}>{task.title}</li>
))}
</ul>
</div>
);
}
export default App;
Add a simple form to create new tasks. Create a new component TaskForm.js
: