react frontend connecting to flask backend Howto

Question

I have a ReactJS front end and a flask backend and I am having difficulties making both talk to each other, particular sending form variables from the frontend to Flask.

Given below is my front end code which runs on 127.0.0.1:3000

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
class Form1 extends Component{
  render(){
    return(
        <div class="form">
            <form action="/result" method="get">
                <input type="text" name="place" />
                <input type="submit" />
            </form>
        </div>
    );
  }
}
ReactDOM.render(
<Form1/>,
document.getElementById('root')
);

My backend flask code is as given below and runs on 127.0.0.1:5000

from flask import Flask, render_template, request
import requests
import json
app = Flask(__name__)
@app.route('/result',methods = ['POST', 'GET'])
def result():
   if request.method == 'GET':
      result = request.form
      print (result['place'])

If you're serving the react page on one port, but trying to access a service on another port, then you'd need to specify that somewhere - probably <form action="127.0.0.1:5000/result" method="get"> — Peter Gibson
– Peter Gibson, Commented Feb 14, 2018 at 0:23
changing to <form action="127.0.0.1:5000/result" returns an about:blank page. — lordlabakdas
– lordlabakdas, Commented Feb 14, 2018 at 0:35
First problem: your flask method def result() does not return anything to the client. flask.pocoo.org/docs/0.12/quickstart/#routing — Anthony Kong
– Anthony Kong, Commented Feb 14, 2018 at 4:32

arshovon · Accepted Answer · 2018-02-14 09:27:03Z

I have tweaked your code a little bit. Changes I have made:

added the backend path http://localhost:5000/result in frontend as form action path.
used request.args.get method to grab the submitted value.

The frontend is running on port 3000 and the backend is running on port 5000; both in localhost.

Frontend code:

import ReactDOM from 'react-dom';
import React, {Component} from 'react';
class Form1 extends Component{
    render(){
        return (
            <div class="form">
                <form action="http://localhost:5000/result" method="get">
                    Place: <input type="text" name="place"/>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
        );
    }
}
ReactDOM.render(
    <Form1/>,
    document.getElementById('root')
);

Backend Code:

from flask import Flask, request

app = Flask(__name__)

@app.route('/result', methods = ['GET', 'POST'])
def result():
    if request.method == 'GET':
        place = request.args.get('place', None)
        if place:
            return place
        return "No place information is given"

if __name__ == '__main__':
    app.run(debug = True)

Here is the screenshot of running program:

Reference:

Flask documentation: The request object

Collectives™ on Stack Overflow

react frontend connecting to flask backend Howto

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related