Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Plaid Component Refreshes the page

Sorry for my English, I'm not a native speaker so please don't minus me too much. I'm a beginner in programming and I'm learning from tutorials found on internet. Today is my first time asking a question on Stack Overflow. It's probably a silly question, I know there are many similar questions, but it's a different issue, it's not a duplicate. Let me move to my question.

I have a react component in which I'm using react-plaid npm package to use Plaid APi. it can be found here react-plaid

My current component code looks like this

Component

import React, {Component} from 'react';
import BuggyApi from "../../services/BuggyApi";
import BlockUi from "react-block-ui";
import ReactPlaid from 'react-plaid'

class Integration extends Component{
    state={
        plaid_public_key: "",
        plaid_public_token: "",
        blocking: false,
        isSuccess: false,
        errorMessage: [],
        open: false,
        plaidData: [],
    };

    componentWillMount(){
        new BuggyApi().getPlaidPublicKey().then((response)=>{
            console.log(response.data);
            if(response.status===200){
                this.setState({
                    plaid_public_key: response.data.public_key
                });
            }
        }).catch((error)=>{

        })
    }


    handleOnExit = (error, metadata)=>{
        if (error != null) {
            console.log('link: user exited');
            console.log(error, metadata);
        }
    };
    handleOnLoad =()=>{
        console.log('link: loaded');
    };
    handleOnEvent =(eventname, metadata)=>{
        console.log('link: user event', eventname, metadata);

    };
    handleOnSuccess = (public_token, metadata) => {
        console.log('public_token: ' + public_token);
        console.log('account ID: ' + metadata.account_id);
    };
    componentDidMount(){
        const script = document.createElement("script");
        script.src = "https://cdn.plaid.com/link/v2/stable/link-initialize.js";
        script.async = true;
        document.body.appendChild(script);
    }



    render(){
        return(
            <div className="page-wrapper">
                <div className="content container-fluid">
                    <div className="row">
                        <div className="col-xs-8">
                            <h4 className="page-title">Integration</h4>
                        </div>
                        <div className="col-xs-4 text-right m-b-30">

                        </div>
                    </div>
                    <div className="row">
                        <div className="col-md-12">
                            <div className="text-center">
                                <h4 className="modal-title">
                                    Link your bank account
                                </h4>
                            </div>
                            <br/>
                            <br/>
                            <form>
                                {(this.state.isSuccess)?
                                    <div className="row">
                                        <div className="col-sm-6 col-sm-offset-3">
                                            <div className="alert alert-success">
                                                <strong>Success!</strong> Settings updated successfully!
                                            </div>
                                        </div>
                                    </div>:null
                                }
                                {(this.state.errorMessage.length>0)?
                                    <div className="row">
                                        <div className="col-sm-6 col-sm-offset-3">
                                            <div className="alert alert-danger">
                                                <ul>
                                                    {this.state.errorMessage.map((message,i) =><li key={i}>{message}</li>)}
                                                </ul>
                                            </div>
                                        </div>
                                    </div>:null
                                }
                                <BlockUi tag="div" blocking={this.state.blocking}>
                                    <div className="row">
                                        <div className="col-sm-6 col-sm-offset-3">
                                            {(this.state.plaid_public_key!=="")?
                                                <div>
                                                    <button onClick={() => this.setState({ open: true})}>Open Plaid</button>
                                                    <ReactPlaid
                                                        clientName="Arshad"
                                                        product={["auth"]}
                                                        apiKey={this.state.plaid_public_key}
                                                        env='sandbox'
                                                        open={this.state.open}
                                                        onSuccess={(token, metaData) => this.setState({plaidData: metaData})}
                                                        onExit={() => this.setState({open: false})}
                                                    />
                                                </div>:null
                                            }
                                        </div>
                                    </div>

                                </BlockUi>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        );
    };
}

export default Integration;  

The problem is when I click the open link button it just shows the Plaid model for few seconds and then refreshes the application page. I'm wondering if someone had the same and can help me out there.

Note:
Please ignore the public key state you can just set it to "c10c40c4ee5eee97764307027f74c2" in apiKey={this.state.plaid_public_key}. I'm getting the public key from the server using axious.

like image 772
root Avatar asked Oct 16 '22 16:10

root


2 Answers

I think I found the issue and though it'd be OK to post my answer on stackoverflow to help others if anyone ever faces the same problem. I was putting the react-plaid-link inside the tags. The react-plaid-link returns a button which according to the html standard a button inside a form without "type" attribute acts like a submit button. Same goes here in my case which I click the the button it submit the form which causes refreshing page. I fixed the issue by just removing the tags. My updated code looks like this.

import React, {Component} from 'react';
import BuggyApi from "../../services/BuggyApi";
import BlockUi from "react-block-ui";
import ReactPlaid from 'react-plaid'

class Integration extends Component{
state={
    plaid_public_key: "",
    plaid_public_token: "",
    blocking: false,
    isSuccess: false,
    errorMessage: [],
    open: false,
    plaidData: [],
};

componentWillMount(){
    new BuggyApi().getPlaidPublicKey().then((response)=>{
        console.log(response.data);
        if(response.status===200){
            this.setState({
                plaid_public_key: response.data.public_key
            });
        }
    }).catch((error)=>{

    })
}


handleOnExit = (error, metadata)=>{
    if (error != null) {
        console.log('link: user exited');
        console.log(error, metadata);
    }
};
handleOnLoad =()=>{
    console.log('link: loaded');
};
handleOnEvent =(eventname, metadata)=>{
    console.log('link: user event', eventname, metadata);

};
handleOnSuccess = (public_token, metadata) => {
    console.log('public_token: ' + public_token);
    console.log('account ID: ' + metadata.account_id);
};
componentDidMount(){
    const script = document.createElement("script");
    script.src = "https://cdn.plaid.com/link/v2/stable/link-initialize.js";
    script.async = true;
    document.body.appendChild(script);
}



render(){
    return(
        <div className="page-wrapper">
            <div className="content container-fluid">
                <div className="row">
                    <div className="col-xs-8">
                        <h4 className="page-title">Integration</h4>
                    </div>
                    <div className="col-xs-4 text-right m-b-30">

                    </div>
                </div>
                <div className="row">
                    <div className="col-md-12">
                        <div className="text-center">
                            <h4 className="modal-title">
                                Link your bank account
                            </h4>
                        </div>
                        <br/>
                        <br/>
                            {(this.state.isSuccess)?
                                <div className="row">
                                    <div className="col-sm-6 col-sm-offset-3">
                                        <div className="alert alert-success">
                                            <strong>Success!</strong> Settings updated successfully!
                                        </div>
                                    </div>
                                </div>:null
                            }
                            {(this.state.errorMessage.length>0)?
                                <div className="row">
                                    <div className="col-sm-6 col-sm-offset-3">
                                        <div className="alert alert-danger">
                                            <ul>
                                                {this.state.errorMessage.map((message,i) =><li key={i}>{message}</li>)}
                                            </ul>
                                        </div>
                                    </div>
                                </div>:null
                            }
                            <BlockUi tag="div" blocking={this.state.blocking}>
                                <div className="row">
                                    <div className="col-sm-6 col-sm-offset-3">
                                        {(this.state.plaid_public_key!=="")?
                                            <div>
                                                <button onClick={() => this.setState({ open: true})}>Open Plaid</button>
                                                <ReactPlaid
                                                    clientName="Arshad"
                                                    product={["auth"]}
                                                    apiKey={this.state.plaid_public_key}
                                                    env='sandbox'
                                                    open={this.state.open}
                                                    onSuccess={(token, metaData) => this.setState({plaidData: metaData})}
                                                    onExit={() => this.setState({open: false})}
                                                />
                                            </div>:null
                                        }
                                    </div>
                                </div>

                            </BlockUi>
                    </div>
                </div>
            </div>
        </div>
    );
};
}

 export default Integration; 
like image 55
root Avatar answered Oct 20 '22 21:10

root


Sometimes you need to put the Plaid button inside a form element, in which case, just pass (e) => e.preventDefault() in as the onClick handler

<ReactPlaid
    clientName="Arshad"
    product={["auth"]}
    apiKey={this.state.plaid_public_key}
    env='sandbox'
    open={this.state.open}
    onSuccess={(token, metaData) => this.setState({plaidData: metaData})}
    onExit={() => this.setState({open: false})}
    onClick={(e) => e.preventDefault()}
/>
like image 34
AnonymousSB Avatar answered Oct 20 '22 20:10

AnonymousSB