I am trying to display data for certain dates that the user inputs. In my react form, I am sending the input dates data to my flask server. My flask server then retrieves the data from these dates from a database. Now, I want to send this data back to my React frontend and plot it. Here is my code so far:
My React class component for graphing and form:
import React, { Component } from 'react';
import Plot from 'react-plotly.js';
class LineChart extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Plot
data={[
{
x: this.props.allData[0],
y: this.props.allData[1],
type: 'scatter'
}
]}
layout={{ width: 1000, height: 500, title: 'Google Stock Data' }}
/>,
<form method='post' action='/acceptDates'>
<input type="text" id='startDate' name='startDate' />
<input type='submit' value='submit' />
</form>
</div>
);
}
}
export default LineChart;
My React App.js that can take in data from the flask /data function:
import logo from './logo.svg';
import './App.css';
import LineChart from './linechart'
import React, { useState, useEffect } from 'react'
function App() {
const [data, setData] = useState([{}])
// retrieve data from flask
useEffect(() => {
fetch("/data").then(
res => res.json()).then(
data => {
setData(data)
console.log(data)
})
}, [])
//this sends the received data from the parent to child class component for it to graph
return (
<div className="App">
<LineChart allData={[data['dates'], data['open_price']]} />
</div>
);
}
export default App;
My flask app:
from flask import Flask, request, render_template
from flask_sqlalchemy import SQLAlchemy
from connect_db import *
app = Flask(__name__)
# gets the input dates from the React form and sends them to /data to get the data
@app.route('/acceptDates', methods=['GET', 'POST'])
def get_dates():
sd = request.form.get('startDate')
return get_data(sd)
# retrieves data from postgresql db and returns json object
@app.route('/data')
def get_data(startD):
data = retrieve_data(startD)
return {"dates": data[0], "open_price": data[1]}
@app.route('/')
def index():
return "<h1 > Home page </h1>"
if __name__ == '__main__':
app.run(debug=True)
I am able to:
- send the form input from react to flask and retrieve the data needed to be graphed
- have react take my data from my /data function and send it to the class component for graphing
What I need help on:
- after retrieving the data from flask, tell React to graph it. Essentially, how do I tell my flask app to go back to React after it finds the data and have React graph it for me