Data from User inputting into a Form and sending data to Python Backend

Question

Problem: I am attempting to process the data from a form the user enters in the React Frontend . I want to do some calculations on a variable, I am currently just want to print it out, eventually I would want to return information back to the React application, but I can't get this simple step to work.

My Attempt: This is the snippet of the form I am using:

<form className="patient-form" method="post">

    <input type="text" name="variable" />
    <input type="submit" />

This is the Python Backend in which I want to use the variable:

from flask import Flask,request

app = Flask(__name__)

@app.route('/',methods=['POST'])
def getVariable():
    variable = request.json["variable"]
    return {"variable": 'Backend variable' + variable}

I am also using a proxy in package.json in order for React and Flask to work simultaneously.

When I enter information from the form I get:

Cannot Post /. --> This is on localhost:3001

On the flask backend I get:

The method is not allowed for the requested URL.

So this would seem like I am using the wrong route, which route would I use for this to work?

I apologize if this is simple, as you can tell I am new to React and Flask.

I found this post: How to send data from React to Flask then back to react and show output on DOM

I am still not able to POST data to the flask backend from the frontend form, am I missing something simple?

score 0 · Accepted Answer · answered Sep 04 '21 at 11:10

From what i understand: Form send to Reactjs and Flask simultaneously -> You want Flask to send data to Reactjs.

There are similar problems here: i) How to get POSTed JSON in Flask?, ii) React frontend cannot POST to Flask backend and iii) Not able to post data from React Js to Node js
Change the concept: From the form send the data to reactjs. Then send POST request with Axios to Flask to get back the calculated variables.

Example code:

```
const response = await axios.post(
  'https://example.com',
  { example: 'data' },
  { headers: { 'Content-Type': 'application/json' } }
)
console.log(response.data)
```

where https://example.com use your flask server address.

Caution: If your flask server listens to different port (e.g. port 5000), you must use the address with the port in the form address:port (e.g. localhost:5000 or 127.0.0.1:5000 or https://example.com:5000).

More information about Axios, check this link: How to send HTTP Requests in React | malcoded or try to understand the answers from the above links.

Would I need to put that inside of an async? I am having trouble understanding where to use this in my code — Justin Philip Fulkerson, Sep 05 '21 at 11:17
As i don't have an example of your ReactJS code, i assume that your code in ReactJS receive the data from your form. At the section where your code check the submitted data, you add there the above code. `console.log(response.data)` is just an example to preview the received data from flask. Just learn more about how to make REST apps to understand more about what i proposed to you. — George Efthymiou, Sep 05 '21 at 16:16

score 0 · Answer 2 · answered Sep 04 '21 at 13:35

0

Recieving Data from Frontend to Flask is pretty straight-forward

from flask import request

@app.route("/recieve_data", methods=['POST', 'GET'])
def recieve_data():

    if request.method == "POST":

        data = request.get_data()

        data = json.loads(data)
        # Do Stuff Here
        return data

Sending Data to Frontend from Flask is usually done through jinja.

var data = JSON.parse("{{data|tojson}}")

answered Sep 04 '21 at 13:35

Talha_Altair

1
1

Would this work if the input was from a form: I am doing `variable = request.form.get('Variable',None) return variable ` But I am still getting cannot Post error and Method Not allowed error on the backend – Justin Philip Fulkerson Sep 05 '21 at 11:21

Data from User inputting into a Form and sending data to Python Backend

2 Answers2