App.js

import './App.css';
import axios from "axios";
import {useState} from "react";
import {useEffect} from "react";
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import { DataGrid } from '@material-ui/data-grid';



function App() {
    const columns = [
        { field: 'id', headerName: 'id', width: 150 },
        { field: 'name', headerName: 'name', width: 150 },
        { field: 'description', headerName: 'description', width: 300 },
        { field: 'status', headerName: 'status', width: 150 },
    ];

    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);
            });
        setDescription('')
        setStatus(0)
        setTitle('')
    }

    const postTask = (e) => {

        e.preventDefault()

        axios.post('https://localhost:8000/api/tasks', {
            name: title,
            description: description,
            status: parseInt(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('');
    const [description, setDescription] = useState('');
    const [status, setStatus] = useState(0);

    const handleChangeTitle = (e) => {
        let title = e.target.value;
        if (title === 'guillaume') {
            alert('interdit')
        }
        setTitle(e.target.value)
    }

    const handleChangeDescription = (e) => {
        setDescription(e.target.value)
    }

    const handleChangeStatus = (e) => {
        setStatus(e.target.value)
    }
  return (
    <>
        <form style={{paddingLeft: '25px'}}>
            {title} <br/>
            <TextField name="title" id="title" value={title} onChange={handleChangeTitle} label="Titre" />
            <TextField name="description" value={description} onChange={handleChangeDescription} id="description" label="Description" />
            <select onChange={handleChangeStatus} name="status" >
                <option value="0" selected={status === 0} >Zero</option>
                <option value="1" selected={status === 1}>Un</option>
                <option value="2" selected={status === 2}>Deux</option>
            </select>
            <Button onClick={postTask} variant="outlined" color="primary">
                New
            </Button>
        </form>
        <div style={{ height: 300, width: '100%', paddingLeft: '25px' }}>
            {tasks && <DataGrid rows={tasks['hydra:member']} columns={columns} />}
        </div>

    </>
  );
}

export default App;