send mail form working but the handleChange() is wip

Installed React Final Form

package.json

@@ -14,11 +14,13 @@
     "axios": "^0.19.2",
     "express": "^4.17.1",
     "express-favicon": "^2.0.1",
+    "final-form": "^4.20.1",
     "fontsource-roboto": "^2.2.6",
     "jquery": "^3.5.1",
     "path": "^0.12.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-final-form": "^6.5.1",
     "react-redux": "^7.2.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/App.js

@@ -38,8 +38,6 @@ function App() {
         getLastProjectByDate();
     }, [projects]);
 
-    console.log("LAST", projects[0]);
-
     return (
         <Router>
             <CssBaseline>
@@ -51,7 +49,7 @@ function App() {
                         <Route path="/portfolio/:lastProject">
                             <Portfolio />
                             <Route path="/portfolio/:id">
-                                <Project projects={projects}/>
+                                <Project projects={projects} />
                             </Route>
                         </Route>
                         <Route path="/details" component={Details} />

src/components/Contact.jsx

@@ -1,10 +1,14 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import Axios from "axios";
+import { Form, Field } from "react-final-form";
 import {
     Paper,
     Box,
     Card,
+    InputLabel,
     CardContent,
     Button,
+    TextField,
     CardActions,
     Typography,
 } from "@material-ui/core";
@@ -17,23 +21,68 @@ import "../App.css";
 import "./style/contact.css";
 
 function Contact() {
+    const [value, setValue] = useState({
+        user_email: "[email protected]",
+        subject: "coucou",
+        text: "lorem ipsum",
+    });
+
+    const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+    const onSubmit = async (values) => {
+        await sleep(300);
+        window.alert(
+            "Je vous remercie pour votre message et j'y répondrai dès que possible"
+        );
+    };
+
+    const handleChange = (event) => {
+        event.preventDefault();
+        console.log("VALUE TARGET", event.target.value);
+    };
+    const handleSubmit = () => {
+        const sendURL = `${process.env.REACT_APP_HOST}/contact`;
+        const formDatas = value;
+        Axios.post(sendURL, formDatas);
+    };
     return (
-        <Box className="main contact">
-            <Paper className="contact-container">
-                <Card className="title">
-                    <Typography variant="h1">Contactez moi!</Typography>
-                </Card>
-                <Card className="email">
-                    <Typography variant="">Email</Typography>
-                </Card>
-                <Card className="phone">
-                    <Typography variant="">Tel</Typography>
-                </Card>
-                <Card className="text">
-                    <Typography variant="">Texte</Typography>
-                </Card>
-            </Paper>
-        </Box>
+        <Card className="main contact">
+            <Form
+                onSubmit={onSubmit}
+                render={({ handleSubmit, handleChange }) => (
+                    <form method="POST" className="contact-container">
+                        <Typography variant="h1">Contactez moi!</Typography>
+                        <InputLabel>Email</InputLabel>
+                        <Field
+                            name="user_email"
+                            component="input"
+                            type="email"
+                            value={handleChange}
+                            placeholder="[email protected]"
+                        />
+                        <InputLabel>Nom complet</InputLabel>
+                        <Field
+                            name="Nom complet"
+                            component="input"
+                            type="text"
+                            placeholder="Mr John DOE"
+                        />
+                        <InputLabel>Message</InputLabel>
+                        <Field
+                            name="Message"
+                            component="input"
+                            type="textarea"
+                            placeholder=""
+                        />
+                        <Button
+                            component="submit"
+                            onClick={() => handleSubmit()}
+                        >
+                            Envoyer
+                        </Button>
+                    </form>
+                )}
+            />
+        </Card>
     );
 }