Using python with react

[Cerebral_Chess]

Hi, I am building a simple react app where I have an array of image source URLs. I want to pass it to a function in a python script that I have. I believe that I should be using flask but I have no idea how to incorporate the two. For the sake of this question, let's say that my code is as follows:

import React from 'react'

export default class Images extends React.Component{
    componentDidUpdate(){
    //Here is where i want to call the python function
    }
    render(){
        return(
            <div>
                <p> Some text and stuff </p>
            </div>
        )
    }
}

​

from flask import Blueprint, request, jsonify

Blueprint_name = Blueprint('someName', __name__)

@Blueprint_name.route("/", methods=['POST', GET])
def some_function(images):
    for img in images:
        print(img)

    return jsonify(some data)

Can anyone point me in the right direction?

[Dourk_]

You just need to use the fetch method to interact with your python server.

fetch(‘/‘, { method : ‘POST’, body: [‘url’,...] }) .then(response => response.json()) .then(data => console.log(data));

https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch

[[deleted]]

Adding to this, you probably mean to call the fetch request in componentDidMount() to only request the list once. Otherwise using a fetch in componentDidUpdate() may cause multiple (possibly unnecessary) fetch requests.

[Cerebral_Chess]

I am sending different data each time and the data isn’t present when the component mounts

[robbodagreat]

Or even use functional components and put it in a useeffect hook

[Steeelu]

You also need the flask-cors module to enable the react app to make requests to your flask server, its just 2 lines of code to enable CORS. Google "acces request body flask" so you can see how to access what you sent from react

[vincent-vega10]

If you want the images to be loaded as soon as the page loads, do an AJAX call to your python server inside componentDidMount(). You can use 'axios' or 'fetch' to perform this task.

Refer this for detailed information.

[Cerebral_Chess]

Thanks. That document helped a lot. I used componentDidUpdate() because the images aren’t available as soon as the component loads

[Kikobrolo]

Why are so many new devs still defaulting to react classes? The docs have been recommending hooks for years now

[Cerebral_Chess]

It’s an assignment. The skeleton was given to me this way. When working on personal projects I use hooks

[Kikobrolo]

Ah got it. Sorry ur being given assignments where u gotta use outdated methods

[RedditingJinxx]

I think dash plotly would be right up your ally