i try to do a form on react js and i don't want to refresh the page when i submit my form.
I do a callback on my server (flask).
When i try to do :"event.preventDefault();" my call to my flask server doesn't work.
there is my code:
import { useState } from 'react';
const Form = (props) => {
const componentDidMount = (event) => {
event.preventDefault();
// Simple POST request with a JSON body using fetch
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: title })
};
fetch('http://localhost:5000/add', requestOptions)
.then(response => response.json())
.catch(error => console.log(error))
}
const [title, setTitle] = useState('')
const [body, setBody] = useState('')
return (
<div>
<form onSubmit = {() => componentDidMount()} >
<label htmlFor="title" className="form-label">Title</label>
<input
type="text"
className="form-control"
placeholder ="Enter title"
value={title}
onChange={(e)=>setTitle(e.target.value)}
required
/>
<label htmlFor="body" className="form-label">Body</label>
<textarea
className="form-control"
placeholder ="Enter body"
value={body}
onChange={(e)=>setBody(e.target.value)}
required
>
</textarea>
<button
className="btn btn-primary mt-2"
>
Publish article</button>
</form>
</div>
)}
export default Form;
I don't want to refresh the page cause one in two my callback function and i want to work on it but i can't read the error on the console.
Thanks for your help!
you need to pass event as well to trigger event.preventDefault() function
<form onSubmit = {(event) => componentDidMount(event)} >
It is because you are calling the function componentDidMount in form tag.
You just have to pass the reference of the function in the onSubmit attribute.
<form onSubmit={componentDidMount}>
...
</form>
I wouldn't recommend to use a component lifecycle method (like componentDidMount) to handle a form submission event. You could just create a specific handler:
const Form = (props) => {
const handleSubmit = (event) => {
event.preventDefault();
// ...
}
// ...
return (
<div>
<form onSubmit={handleSubmit} >
{/* // ... */}
</form>
</div>
)
}