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?

George Efthymiou · Accepted Answer · 2021-09-04 11:10:21Z

0

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.

answered Sep 4, 2021 at 11:10

George Efthymiou

1267 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Justin Philip Fulkerson Over a year ago

Would I need to put that inside of an async? I am having trouble understanding where to use this in my code

George Efthymiou Over a year ago

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.

Talha_Altair · Accepted Answer · 2021-09-04 13:35:07Z

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 4, 2021 at 13:35

Talha_Altair

112 bronze badges

1 Comment

Justin Philip Fulkerson Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related