title: Where to place form related JS function in React for my lambda contact form?
body: <p>I am trying to use a lambda function to sent contact form submissions to an email.
  The site is built on React, the lambda was built following the guide they suggest <a href="https://dev.to/adnanrahic/building-a-serverless-contact-form-with-aws-lambda-and-aws-ses-4jm0" rel="nofollow noreferrer">Building a serverless contact form with AWS Lambda and AWS SES</a></p>
  <p>However, the issue is that in the guide he uses vanilla JS instead of something more suitable for React and I can't figure out where to place the JS code or if I need to do something else to make it work.</p>
  <p>The lambda function work and I can send emails using a curl command such as</p>
  <pre><code>curl --header &quot;Content-Type: application/json&quot; \
    --request POST \
    --data '{&quot;email&quot;:&quot;john.doe@email.com&quot;,&quot;name&quot;:&quot;John Doe&quot;,&quot;content&quot;:&quot;Hey!&quot;}' \
    https://{id}.execute-api.{region}.amazonaws.com/{stage}/email/send
  </code></pre>
  <p>But it does not function on the form directly because the function is expecting a <code>header &quot;Content-Type: application/json&quot;</code> so I need to add this snippet of JS code, but I don't know where and the site is failing because of that.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const form = document.getElementById('contactForm')
  const url = 'https://{id}.execute-api.{region}.amazonaws.com/{stage}/email/send'
  const toast = document.getElementById('toast')
  const submit = document.getElementById('submit')
  
  function post(url, body, callback) {
    var req = new XMLHttpRequest();
    req.open("POST", url, true);
    req.setRequestHeader("Content-Type", "application/json");
    req.addEventListener("load", function () {
      if (req.status &lt; 400) {
        callback(null, JSON.parse(req.responseText));
      } else {
        callback(new Error("Request failed: " + req.statusText));
      }
    });
    req.send(JSON.stringify(body));
  }
  function success () {
    toast.innerHTML = 'Thanks for sending me a message! I\'ll get in touch with you ASAP. :)'
    submit.disabled = false
    submit.blur()
    form.name.focus()
    form.name.value = ''
    form.email.value = ''
    form.content.value = ''
  }
  function error (err) {
    toast.innerHTML = 'There was an error with sending your message, hold up until I fix it. Thanks for waiting.'
    submit.disabled = false
    console.log(err)
  }
  
  form.addEventListener('submit', function (e) {
    e.preventDefault()
    toast.innerHTML = 'Sending'
    submit.disabled = true
  
    const payload = {
      name: form.name.value,
      email: form.email.value,
      content: form.content.value
    }
    post(url, payload, function (err, res) {
      if (err) { return error(err) }
      success()
    })
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="contactForm"&gt;
    &lt;input type="text" name="name" required placeholder="Your name" /&gt;
    &lt;input type="email" name="email" required placeholder="Your email address" /&gt;
    &lt;input type="text" name="phone_number" required placeholder="Your phone number" /&gt;
    &lt;textarea name="message" required placeholder="Write your message..." &gt;
    &lt;/textarea&gt;
    &lt;button id="submit" type="submit"&gt;Send
      &lt;i className="flaticon-tick"&gt;&lt;/i&gt; 
    &lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And the form is located inside a react functional component:</p>
  <pre><code>const ContactForm = () =&gt; {
      return (
          &lt;form&gt;
              &lt;!-- Above form is here --&gt;
          &lt;/form&gt;
      )
  }
  export default ContactForm
  </code></pre>
  <p>I am trying to imbed it directly into the component but it seems like that is not working. Where should this JS code be within my React project?</p>
  <p>I am not sure if I need to use something like a hook in React. (I am pretty now to react and don't really understand how all that works yet)</p>
  <p>This is the repository:<a href="https://github.com/ChristopherPHolder/Deep-Blue" rel="nofollow noreferrer">Deep-Blue</a></p>
  <p>and the site is located at <a href="https://deep-blue.io" rel="nofollow noreferrer">deep-blue.io</a></p>
  <p>I also asked the Gatsby community and did not get an answer, I have been looking at many different tutorials like, <a href="https://seifi.org/reactjs/build-a-contact-form-in-gatsby-part-2-react-hook-form.html" rel="nofollow noreferrer">this one</a> but they all either use different technologies or fall short of explaining how to handle form submissions in ReactJS with GastbyJS</p>