React Netlify form does not submit - reactjs

Question

Im making a personal website for training and I wanted to use Netlify form submission for /contact URL I tried adding just netlify , netlify='true', and other things like that but i just gives me 404 error everytime im trying to use Netlify form submission, but it doesnt seem to work no matter what I do, I followed several tutorials and repos but still does not work. It just gives 404 error and other stuff;
and please check my github repo,
My GitHub Repo's Link
and here is my Contact.js component;
import React, { Fragment, useState } from 'react';
import '../../App.css';
const encode = (data) => {
return Object.keys(data)
.map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
.join('&');
};
const Contact = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [text, setText] = useState('');
const handleSubmit = (e) => {
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode({
'form-name': 'contact',
name: name,
email: email,
text: text,
}),
})
.then((res) => {
console.log(res);
})
.catch((error) => alert(error));
e.preventDefault();
};
return (
<Fragment>
<div className='contact'>
<div className='contact-wrapper'>
<div className='title'>
<span>Contact me</span>
</div>
<div className='contact-form'>
<form
className='myform'
method='POST'
name='contact'
data-netlify='true'
onSubmit={(e) => handleSubmit(e)}
>
<input type='hidden' name='form-name' value='contact'></input>
<input
type='text'
placeholder='Your Name'
name='name'
value={name}
onChange={(e) => setName(e.target.value)}
></input>
<input
type='email'
placeholder='Your E-Mail'
name='email'
value={email}
onChange={(e) => setEmail(e.target.value)}
></input>
<textarea
placeholder='Your message'
name='message'
value={text}
onChange={(e) => setText(e.target.value)}
></textarea>
<button type='submit'>Send</button>
</form>
</div>
</div>
</div>
</Fragment>
);
};
export default Contact;

Answer 1

Netlify's forms work by their servers editing your html at deploy to add in their hooks for submitting the form.
With a React app, the form will not be visible in the html at deploy, so this won't work.
Netlify have a guide for how to set up their forms with SPAs, view it here: https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/