App.js

import './App.css';
import axios from "axios";
import DisplayTask from "./components/DisplayTask";
import {useState} from "react";
import {useEffect} from "react";

function App() {
    useEffect(() => {
        axios.get('https://localhost:8000/api/projects/1/tasks')
            .then((response) => response.data)
            .then((data) => {
                setTasks(data);
            });
    }, [])

    const refreshData = () => {
        axios.get('https://localhost:8000/api/projects/1/tasks')
            .then((response) => response.data)
            .then((data) => {
                setTasks(data);
            });
    }

    const postTask = (e) => {

        e.preventDefault()

        let Form = new FormData(e.target.form)
        axios.post('https://localhost:8000/api/tasks', {
            name: Form.get('title'),
            description: Form.get('description'),
            status: parseInt(Form.get('status')),
            createdAt: "2021-07-22",
            updatedAt: "2021-07-22",
            users: [
                "/api/users/1"
            ],
            project: "/api/projects/1",
            deadline: "2021-07-22"
        })
            .then(() => {
                refreshData()
            })
    }
    const [tasks, setTasks] = useState(null);
  return (
    <>
      <h1>Task</h1>
        {tasks && tasks['hydra:member'].map(task => (
            <DisplayTask task={task}  />
        ))}
        <form>
            <input type="text" name="title" placeholder="titre" />
            <input type="text" name="description" placeholder="description" />
            <select name="status" >
                <option value="0">Zero</option>
                <option value="1">Un</option>
                <option value="2">Deux</option>
            </select>
            <button onClick={postTask}>New</button>
        </form>

    </>
  );
}

export default App;