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 javaer1[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 do I click my button or run my function automatically in react native?

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

TOP Ranking

HotTag

Archive