How to redirect form after submission in Reactjs

[Liamgrossman]

Hello all,
So I have a client side google form as a contact form and currently after submission it redirects to google’s thank you page. I would like it to go to a custom thank you page after submission. The problem is all the solutions I’ve seem to find require inline javascript. So far that I know of, I can’t use script tags or import javascript files into my react components, I can only write JSX. Here is what my code looks like. Any solution that would work with my reactjs situation? Thanks a bunch!

<form action="https://docs.google.com/forms/d/e/1FAIpQLSez3SXaKvZ8EgjbKmrKKzJSvFj4mkxTDgj8-sL7Ogau309UkA/formResponse" target="_self" id="bootstrapForm" method="POST"> `

** various inputs and a submit button

</form>

[mawburn]

This is just vanilla HTML, nothing about it says JSX. It’s just a standard HTML submit. If you’re doing a standard HTML submit, there’s not really much you can do.

JSX would usually look something like this

<form onSubmit={handleSubmit}>
  {/* various inputs and a submit button */}
</form>

Where handleSubmit would be like this:

handleSubmit = e => {
    this.setState({text: 'Thank you!'})
    sendSubmitSomewhere('https://docs.google.com/forms/d/e/1FAIpQLSez3SXaKvZ8EgjbKmrKKzJSvFj4mkxTDgj8-sL7Ogau309UkA/formResponse', formData)
}

I can only write JSX.

You shouldn’t be coding in JSX. JSX is just the template language. Your logic should be in JS.

[Liamgrossman]

Correct, JSX is different from html, but the fact of the matter is I can’t use script tags in my code. It would be impossible to add your handleSubmit function. Maybe I’m wrong but I can’t find any documentation on any way to add JavaScript to an react component/jsx

[mawburn]

JSX is simply the templating language for a React component. You don’t put your JS inside your JSX. Like most other templating languages, JSX specifically inhibits your ability to write much functional code inside of it.

https://en.wikipedia.org/wiki/Template_processor

Here’s an SP article I wrote about JSX a couple years ago.

An Introduction to JSX — SitePoint

Maybe I’m wrong but I can’t find any documentation on any way to add JavaScript to an react component/jsx

Where have you looked?

Here are some good official resources to help you get a better understanding of how to use React:
https://reactjs.org/docs/react-component.html
https://reactjs.org/docs/forms.html
https://reactjs.org/docs/hooks-intro.html
https://reactjs.org/tutorial/tutorial.html
https://reactjs.org/tutorial/tutorial.html#function-components

but the fact of the matter is I can’t use script tags in my code

If you’re talking about something like this:

<script>console.log('stuff')</script>

Not only does this not belong in JSX, but it doesn’t belong anywhere in an entire React project.