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);
    const [title, setTitle] = useState('ffff');

    const handleChangeTitle = (e) => {
        let title = e.target.value;
        if (title === 'guillaume') {
            alert('interdit')
        }
        setTitle(e.target.value)
    }
  return (
    <>
      <h1>Task</h1>
        {tasks && tasks['hydra:member'].map(task => (
            <DisplayTask task={task}  />
        ))}
        <form>
            {title} <br/>
            <input type="text" name="title" value={title} onChange={handleChangeTitle} 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;