So basically the API is going to send back a response that is true/false based on user input and I'm trying to set the variable res to be that response so I can use that to render the next component. However, I need to wait until the response has actually come back, otherwise the value is just going to be false because it is running the code below the axios post before it actually goes through. So I decided to use async/await but for some reason it is reloading the original form ApplyForm now? When I take out async and await it doesn't do that so I am very confused. Can someone help figure out the issue or suggest an alternative way of doing this? Any help is appreciated thanks.
ApplyForm.js
import React from "react";
import Component from "react";
import ReactDOM from 'react-dom';
import PaymentForm from './PaymentForm.js'
class ApplyForm extends React.Component {
constructor(props) {
super(props);
this.state = {providerID: ''}
}
handleSubmit = (e) => {
ReactDOM.render(<PaymentForm data = {this.state.providerID} />, document.getElementById('root'));
}
onChange = (e) => {
this.setState({
providerID: e.target.value,
});
}
shouldComponentUpdate() {
return false;
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<h1> Apply for a payment plan </h1>
<p>Four Letter Provider ID:</p>
<input
type='text'
name = "providerID"
onChange={this.onChange}
/>
<br></br>
<small> If you do not have a provider ID, you can skip this part. </small>
<p>Payment Plan Amount:</p>
<input
type='number'
required
onChange={this.myChangeHandler}
/>
<p>Your Procedure:</p>
<input
type='text'
name = "Procedure"
required
onChange={this.myChangeHandler}
/>
<br></br>
<br></br>
<input type="button" value="Submit" onClick={this.handleSubmit}/>
</form>
);
}
}
export default ApplyForm;
PaymentForm.js
import React from "react";
import Component from "react";
import ReactDOM from 'react-dom';
import Link from './Link.js';
import axios from 'axios'
let res = false;
class PaymentForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {provID: this.props.data};
}
async handleSubmit(event) {
const data = new FormData(event.target);
const res = await axios({
method: 'post',
url: 'test-url',
data: {
httpMethod: "POST",
body: {
UID: "123456",
Last_Name: data.get('Last_Name'),
personal_data: {
Treatment_Plan: data.get('Plan'),
First_Name: data.get('First_Name'),
Last_Name: data.get('Last_Name'),
Address: data.get('Address'),
Unit: data.get('Unit'),
City: data.get('City'),
State: data.get('State'),
Zip: data.get('Zip'),
Email: data.get('Email'),
Employment_status: data.get('Employment_status'),
EST_Credit: data.get('EST_Credit'),
Phone: data.get('Phone'),
DOB: data.get('DOB'),
Income: data.get('Income'),
Rent: data.get('Rent'),
SSN: data.get('SSN'),
Co_App: data.get('Test'),
},
provider_data: {
Provider_ID: this.state.provID,
Procedure_Amount: data.get('Request_Amount'),
Procedure_Des: data.get('Loan_Purpose')
},
}
}
}).then((response) => {
res = response['data']['is_passed'];
console.log(res);
});
if (res) {
ReactDOM.render(<Link />, document.getElementById('root'));
}
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<h1> See Your Loan Options </h1>
<p>Request $1000 to $100000</p>
<input
type='Number'
name = "Request_Amount"
onChange={this.myChangeHandler}
/>
<br></br>
<p>Loan Purpose:</p>
<input
type='text'
name = "Loan_Purpose"
required
onChange={this.myChangeHandler}
/>
<p>Do you already have a treatment plan for your procedure?</p>
<input type="radio" id="Yes" value = "Yes" name = "Plan" onChange={this.myChangeHandler}/>
<label for="Yes">Yes</label>
<input type="radio" id="No" value = "No" name = "Plan" onChange={this.myChangeHandler}/>
<label for="Yes">No</label>
<br></br>
<p>What is the name of your provider?</p>
<input type='text' name = "Provider" required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<p>First Name</p>
<input type='text' name = "First_Name" required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<p>Last Name</p>
<input type='text' name = "Last_Name" required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<p>Street Address</p>
<input type='text' name = "Address" required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<p>Unit Number</p>
<input type='text' name = "Unit_Number" onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<p>City</p>
<input type='text' name = "City" required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<p>State</p>
<select name = "State" >
<option value="" selected disabled hidden>State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<br></br>
<br></br>
<p>Zip Code</p>
<input type='text' name = "Zip" required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<p>Email Address</p>
<input type='email' name = "Email" required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<p>Confirm Email Address</p>
<input type='email' required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<select name = "Employment_status" >
<option value="" selected disabled hidden>Employment Status</option>
<option value="E">Employed</option>
<option value="U">Unemployed</option>
<option value="S">Self Employed</option>
<option value="M">Military</option>
<option value="R">Retired Benefits</option>
<option value="O">Other</option>
</select>
<br></br>
<br></br>
<select name = "EST_Credit" >
<option value="" selected disabled hidden>Estimated Credit Range</option>
<option value="E"> > 720</option>
<option value="U">680 - 720</option>
<option value="S">640 - 679</option>
<option value="M">550 - 639</option>
<option value="R"> < 550 </option>
</select>
<br></br>
<br></br>
<p>Mobile</p>
<input type='text' name = "Phone" required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<p>Date of Birth (yyyy/dd/mm)</p>
<input type='text' name = "DOB" required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<p>Annual Individual Income</p>
<input type='text' name = "Income" required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<select name = "Rent" >
<option value="" selected disabled hidden>Housing Status</option>
<option value="E">Rent</option>
<option value="U">Mortgage</option>
<option value="S">Fully-Owned</option>
<option value="M">Partially-Owned</option>
<option value="R">Other</option>
</select>
<br></br>
<br></br>
<p>Social Security Number</p>
<input type = "password" name = "SSN" required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<p>Confirm Social Security Number</p>
<input type = "password" required onChange={this.myChangeHandler}/>
<br></br>
<br></br>
<p>Do you want to add a co-applicant?</p>
<input type="radio" id="Yes" value = "Yes" name = "Test" onChange={this.myChangeHandler}/>
<label for="Yes">Yes</label>
<input type="radio" id="No" value = "No" name = "Test" onChange={this.myChangeHandler}/>
<label for="Yes">No</label>
<br></br>
<br></br>
<input type="checkbox" required id="Agree"/>
<label for = "Agree"> Our Terms of Use, Privacy Policy, Credit Report Authorization and Telephone and Email Consents.</label>
<br></br>
<br></br>
<button>See My Rates</button>
</form>
);
}
}
export default PaymentForm;
e.preventDefault()on the form submit handler to prevent the default behavior of your form (submitting the page which reloads it)<form onSubmit={this.handleSubmit}>. When a form submits, its default behavior is to post the page to the server which also refreshes the page because usually the server would return a new page to render. When doing a single page application, you dont want the form to actually submit the page, so you need to prevent this behavior. the functionhandleSubmitaccepts the submit event you've aliased ase. So the very fist line of thehandleSubmitfunction you need to adde.preventDefault(). I suggest you read up on form submission