Disclaimer re potential duplicates: There have been similar questions to mine and I think I have read pretty much all of those answers by now but none of them solved the issue for me.
I've got an app, frontend is React, and backend is a flask server. I'm having a major issue. The code seems to check out for both front- and backend, but after I click the submit button of a form, I get the error in the JS console: Form submission canceled because the form is not connected.
Now, there is only one button on my Form, and this is of type submit
, with the handleSubmit handler in the form tag, so I don't think this is causing the issue.
I also added this config object to handle potential CORS faults but I'm not getting any CORS errors at least.
React Form Component code:
import React, { useState } from "react";
import axios from "axios";
import Button from '@material-ui/core/Button';
import { TextField } from '@material-ui/core';
import DisplayUpper from './DisplayUpper';
function Form() {
const [inputText, setInputText] = useState("");
const [fetchedData, setFetchedData] = useState("");
const [isSubmitted, setSubmitted] = useState(false);
const handleSubmit = (e) => {
console.log("button clicked");
const config = {
headers: {'Access-Control-Allow-Origin': '*'}
};
axios
.post("http://localhost:5000/process", {
inputText: inputText,
}, config)
.then((res) => {
console.log("res", res);
setFetchedData(res.data);
})
.catch((er) => {
console.log(er);
});
}
return (
<div>
<form onSubmit={handleSubmit} method="post">
<label>
Enter Text :
<TextField multiline={true} variant="outlined"
name="inputText"
value={inputText}
onChange={(e) => setInputText(e.target.value)}
/>
</label>
<Button variant="contained" color="primary" type="submit" name="Submit">
SUBMIT
</Button>
</form>
</div>
);
}
export default Form;
Then, the app.py code:
@app.route('/process', methods=['POST'])
def result():
text = request.form.get('inputText')
upper_text = text.upper()
print(upper_text)
return upper_text
I set proxy: "http://localhost:5000" in package.json.
Read more here: https://stackoverflow.com/questions/66327333/error-form-submission-canceled-because-the-form-is-not-connected
Content Attribution
This content was originally published by timman at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.