How to run python scripts on button click in React?

Harish

I don't know how to run .py file on clicking a button in ReactJS . All i want is to fetch the data created by the .py file using flask on clicking a button in React application . I set up a link on that button which will redirect to another webpage on which i want to display that fetched data. The React app and the .py file are on the same machine. I have no idea on how to do this . My app.js file in React app runs on "http://localhost:3000"

const onClickHandler = () => {
//fetching the data from the server  localhost:5000/page_name
  const url = "http://localhost:5000/data";
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");

 
    try {
      const res = await fetch(url);
      const data = await res.json();
      console.log(data);
      setName(data.name);
      setPassword(data.password);
    
    } catch (error) {
      console.log(error);
    }
  };

  return(
    <div>
    <button onClick={onClickHandler}>Click me</button>
        {name}
    {password}
    </div>
  );

My .py file runs on "http://localhost:5000/my_link"

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/data',methods=['GET', 'POST'])
def my_link():
  print("I got Clicked")
  return {'name': "geek", "password": "This is PWD"}
  

if __name__ == '__main__':
  app.run(debug=True)
Gaëtan GR

If you have a bit of a misunderstanding of how api work.

Fist you should jsonify your data so wrap your return with jsonify.

return jsonify({'name': "geek", "password": "This is PWD"})

Then before doing anything fancy access your endpoint at /data and see if any data is there... should be or check your code.

If everything work then try :

   fetch('http://localhost:5000/data')
  .then((response) => response.json())
  .then((data) => console.log(data));

Should return some data.

Before jumping into React you should understand api and the fetch library.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to run scripts in python?

How to run an alert on button click React.js

How to run a python script with arguments via the click of a button in javascript

How to unconditionally re-run a python program based on button click?

How to run a function on button click?

How to run Python scripts on Azure?

How to run python scripts online?

How to run sh scripts on python?

How to run code on server on the click of button?

How to run application of the first with click on the button in android?

How to run code on a button click in android fragment

How to run methods in onCreate() without button click

How to run python scripts with default arguments in FastApi

How to run dependent scripts in python in parallel in shell?

How to run multiple python scripts to prometheus

How to run several scripts in differents folders on python

how to run multiple python scripts at the same time?

How to run multiple audio files in python scripts

How to run multiple scripts in a python script with args

How to run and break two python scripts simultaneously?

How to run a Python script upon button click using mod_python without changing browser window

How to click this button with python & selenium

Python - selenium - how to click on the button

How click in Button with Selenium python

How to run React.js app without react-scripts?

How to run form action and click event simultaneously on button click

How to intercept button click, run analytics code, and then continue with click function

How to change a variable value in react on button click

how to set value on button click in react js?

TOP Ranking

  1. 1

    How can I create a column whose entries depend on the contents of a column in another table?

  2. 2

    pump.io port in URL

  3. 3

    How to display items using sessions

  4. 4

    BigQuery - concatenate ignoring NULL

  5. 5

    no applicable method for 'mutate_' applied to an object of class "c('integer', 'numeric')"

  6. 6

    How i extract text from a model dialog in selenium?

  7. 7

    x no applicable method for 'tbl_vars' applied to an object of class "c('double', 'numeric')"

  8. 8

    AirflowException: Celery command failed - The recorded hostname does not match this instance's hostname

  9. 9

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  10. 10

    Most efficient regex for checking if a string contains at least 3 alphanumeric characters

  11. 11

    using excel range find return Type mismatch. (Exception from HRESULT: 0x80020005 (DISP_E_TYPEMISMATCH))

  12. 12

    redirect your computer port to url

  13. 13

    Can't create database with Symfony 4.1 : could not find driver

  14. 14

    How to fix "Exception evaluating SpringEL expression" error after submitting a variable Spring/Thymeleaf

  15. 15

    A python function to get the maximum value of a specific column, given a string that represents a table in CSV format

  16. 16

    Double spacing in rmarkdown pdf

  17. 17

    Uploading Files on production server returns either CORS error or POST 400 Bad Request using Apollo-Graphql

  18. 18

    Android Kotlin Unit test failing with io.mockk.MockKException: no answer found for

  19. 19

    Change Model input_shape but got an : ValueError: Input 0 of layer dense_44 is incompatible with the layer

  20. 20

    Formik, Yup - How to check is Decimal number

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive