How to pass a string in the state of a react component to an external python file

Question

I am new to ReactJS and web dev in general.

I am creating a web app in which I input a string (a mathematical expression) from the user. After pressing the submit button I want to process this string in a python script and return the desired output in the Output TextBox. How can I make this python script a permanent part of my web-app.

The input textbox and submit button are part of the Submit component in a file "Submit.js". The output textbox is the part of the Solution component in a file "Solution.js".

Both of these components are children to the LeftWindowComponent. I am storing values of both the textboxes in the state of the parent component i.e the LeftWindowComponent. The state "fx" defines the text in Input textbox. The state "fprimex" defines the text in Solution (Output) textbox.

Snapshot for reference -

Code for Submit component -->

class Submit extends Component{
    constructor(props){
        super(props);  
    }

    render(){
        return(
            <div className="center">
            <div>
            <Form onSubmit={this.handleSubmit}>
                <Col md={{ size: 6, offset: 3 }} >
            <FormGroup row>
                <Input type="text" id="fx" name="fx" placeholder="Type Here" value = {this.props.fx} onChange={this.props.handleInputChangeFromKeyboard} />      
            </FormGroup>
            </Col>
            </Form>
            <Button type="submit" color="primary">Differentiate</Button>
            </div></div>    
        )
    }
}

Code for Solution component -->

class Solution extends Component{
    constructor(props){
        super(props);  
    }

    render(){
        return(
            <div class = "center">
            <Form>
            <FormGroup>
                <Col md={{size:8,offset:2}}>
                <Input type="textarea" id="fprimex" name="fprimex" placeholder="Solution" value = {this.props.fprimex} />
                </Col>
            </FormGroup>
            </Form>
            </div>    
        )

Code for LeftWindow Component -->

class LeftWindow extends Component{
    constructor(props){
        super(props);
        this.state = {
            fx: "",
            fprimex: "",
        }; 
    }
    handleInputChange = (newInput) => {
        this.setState({
            fx: this.state.fx.concat(newInput),
        });
    }   ;
    handleInputChangeFromKeyboard = (event) => {
        const target = event.target;
        const value = target.value;
        const name = target.name;
        this.setState({
                [name]: value
        });
    }   ;
    render(){
        return(
            <div className="col-12 bg-dark fullheight">
                <h3 className="center">Enter the function to be differentiated</h3>
                <Buttons handleInputChange={this.handleInputChange} />
                <Submit fx = {this.state.fx} handleInputChange={this.handleInputChange} handleInputChangeFromKeyboard = {this.handleInputChangeFromKeyboard}/>
                <Solution fprimex = {this.state.fprimex}/>
            </div>
        );
    }
}

Thanks in advance!

I believe you have to set up a back-end for you application. If you want to use python, you can use Flask. Here is a tutorial on using flask with react: https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project — Vinicius, Feb 27 '21 at 15:51
The code you added is completely irrelevant. All you need is to call `fetch` function with appropriate options to post the value to the server, process the value and return whatever you want. — Molda, Feb 27 '21 at 15:51

score 0 · Answer 1 · answered Feb 27 '21 at 15:54

You can't include your script on frontend part, since browsers don't understand python. You will have to use some server where your frontend will send data from input and server will run your python script.

There is, however attempts to run Python via webassembly. You can check those out and see if it is applicable to you.

score 0 · Answer 2 · answered Nov 23 '21 at 15:08

Create a python flask server and expose a few endpoints and routes. You can call these endpoints in your react code (usng axios, etc.), send the data for computation, receive the response from the server and display on the browser via your app. For your reference: https://developer.okta.com/blog/2018/12/20/crud-app-with-python-flask-react

How to pass a string in the state of a react component to an external python file

2 Answers2