I'm trying to do what I thought would be a simple task. On submit of the form that is pulled in by the GravityForm component, I set the handleSubmit state to true which then renders the thank you message (this all works fine, I've removed the URLs but I can assure you this bit is fine).
My issue comes when I load the success message. The setTimeout function displays the id. Is there a way I can either stop it displaying that id or implement this function in a different way that means it won't show?
The expected functionality is that the thank you message will display for 3 seconds and then the page will load to a different site.
import "./form.css";
import React, { Component } from "react";
import GravityForm from "react-gravity-form";
import styled from "styled-components";
export class Gravity extends Component {
state = {
handleSubmit : false,
}
successMessage = styled.div`
display: block;
color: #fff;
font-size: 24px;
text-align: center;
`;
render() {
const { handleSubmit } = this.state;
if (!handleSubmit) {
return (
<GravityForm
backendUrl="https://removedurlforclientprivacy.com/wp-json/glamrock/v1/gf/forms"
formID="3"
onSubmitSuccess={ () => {
this.setState({
handleSubmit : true,
})
} }
/>
);
} else {
return (
<>
<this.successMessage>
<p>Thanks for entering our competition!<br />If you're our lucky winner, we will let you know.</p>
</this.successMessage>
{ setTimeout(() => window.location.href = 'https://google.co.uk', 3000) }
</>
)
}
}
}
export default Gravity
Can you please try this way, Create a function which you can set your success things and call it on your else condition
renderSuccesssMessage = () => {
setTimeout(() => window.location.href = 'https://google.co.uk', 3000)
return (
<this.successMessage>
<p>Thanks for entering our competition!<br />If you're our lucky winner, we will let you know.</p>
</this.successMessage>
)
}
And Just call this function into your else condtion
else {
return (
this.renderSuccessMessage()
)
}
The reason you're seeing the id is because the setTimeout function returns the id. Imagine the setTimeout() call simply being replaced with 123, so that it would look like { 123 }, it will of course show the 123 value.
A way you can suppress the value is by converting it into an expression to be evaluated - something like { 123 && <></> }, that way the empty element will be returned instead of the value itself (obviously replacing the 123 with your setTimeout() function as follows:
{ setTimeout(() => window.location.href = 'https://google.co.uk', 3000) && <></> }
You could also play around with { 123 && undefined } or { 123 && null }, which would likely result in not even returning an element at all, again ensuring to replace 123 with your setTimeout() function.
You can change your onSubmitSuccess function like below one and remove setTimeout from else block :
onSubmitSuccess={() => {
this.setState({
handleSubmit : true,
},() => {
setTimeout(() => window.location.href = 'https://google.co.uk', 3000)
});
}}