How to get a form to disapear upon submission in React - reactjs

Question

This is a 'contact us' form on a website.
I want all the cells of the form to disappear after the user clicks the 'submit' button upon 'success'. In other words, I wont the form to no longer be rendered if the submission is a success. Since this is React, I wouldn't want the page to do an old fashioned reload, just go away upon the condition.
The way it works now upon submission only the button disappears if the submission is a success and nothing disappears if the submission is a failure, which can remain the same.
This is a form that uses XML with a Google Apps Script to send the user's entered form data upon submission. This all works fine and there is something within the 'status' state working with the onSubmit action that is making the Conditional Rendering not so straight forward.
IF YOU WOULD LIKE TO TEST THIS IN REACT TO WORK IT OUT
Since I don't want to put my email code there you should make the 'else' condition that sets 'status' to say 'SUCCESS' near the bottom at 'this.setState({ status: "ERROR" });' so the if/ else in the email sending function (at the bottom) will render the form as if the data went through and the email was sent. My suggestion.
The code below is how the component works normally but my attempt to solve this problem was to store all the cells above as a variable and 'return' it if 'status' was > 0. Because status is "" before the button is pressed. This just caused the whole page to reload, re-rendering the whole DOM and not sending the email.
import React from 'react';
export default class MyForm extends React.Component {
constructor(props) {
super(props);
this.submitForm = this.submitForm.bind(this);
this.state = {
status: ""
};
}
render() {
const { status } = this.state;
return (
<form
onSubmit={this.submitForm}
action="https://script.google.com/macros/s/000000AKfycbz000000000C0/exec"
method="POST"
>
<div className="row_10" style={{"margin-top": "30px"}}>
<div className="col-25">
</div>
<div className="col-75">
<input type="text" id="name" name="Name" placeholder="Name:"/>
</div>
</div>
<div className="row_10">
<div className="col-25">
</div>
<div className="col-75">
<input type="text" id="Phone" name="Phone" placeholder="Phone:"/>
</div>
</div>
<div className="row_10">
<div className="col-25">
</div>
<div className="col-75">
<input type="text" id="Email" name="Email" placeholder="Email:"/>
</div>
</div>
<div className="row_10">
<div className="col-25">
</div>
</div>
<div className="row_10">
<div className="col-25">
</div>
<div className="row_10">
<textarea className="col-75_T" id="subject" name="subject" placeholder="How can we help you?" style={{"height": "190px"}}></textarea>
</div>
</div>
<div className="subm_button">
<div className="col-25">
</div>
</div>
{status === "SUCCESS" ? <p>Thank you! We will talk to you soon!</p> :<input onClick="fbq('track', 'Contact');" type="submit" value="Submit"/>}
{status === "ERROR" && <p>Ooops! There was an error.</p>}
</form>
);
}
submitForm(ev) {
ev.preventDefault();
const form = ev.target;
const data = new FormData(form);
const xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState !== XMLHttpRequest.DONE) return;
if (xhr.status === 200) {
form.reset();
this.setState({ status: "SUCCESS" });
} else {
this.setState({ status: "ERROR" });
}
};
xhr.send(data);
}
}

Answer 1

Apply the same logic you have with your message to your form
renderForm() {
return (
<form
onSubmit={this.submitForm}
action="https://script.google.com/macros/s/000000AKfycbz000000000C0/exec"
method="POST"
>
<div className="row_10" style={{"margin-top": "30px"}}>
<div className="col-25">
</div>
<div className="col-75">
<input type="text" id="name" name="Name" placeholder="Name:"/>
</div>
</div>
<div className="row_10">
<div className="col-25">
</div>
<div className="col-75">
<input type="text" id="Phone" name="Phone" placeholder="Phone:"/>
</div>
</div>
<div className="row_10">
<div className="col-25">
</div>
<div className="col-75">
<input type="text" id="Email" name="Email" placeholder="Email:"/>
</div>
</div>
<div className="row_10">
<div className="col-25">
</div>
</div>
<div className="row_10">
<div className="col-25">
</div>
<div className="row_10">
<textarea className="col-75_T" id="subject" name="subject" placeholder="How can we help you?" style={{"height": "190px"}}></textarea>
</div>
</div>
<div className="subm_button">
<div className="col-25">
<input onClick="fbq('track', 'Contact');" type="submit" value="Submit"/>
</div>
</div>
</form>
);
}
render() {
const { status } = this.state;
const submitted = status === "SUCCESS";
return (
<>
{!submitted && this.renderForm()}
{submitted && <p>Thank you! We will talk to you soon!</p>}
{status === "ERROR" && <p>Ooops! There was an error.</p>}
</>
);
}