POST a form to an API with React

Question

I use Staticman (staticman.net) for comments on my Gatsby (gatsbyjs.org) site.

I've been using a classic HTML form with method="POST" and action="https://api.staticman.net/..." parameter, as this is what Staticman expects (docs).

However I'd like to make this more "React", and I've changed the form action to a handleSumbit() function:

handleSubmit(event) {
  event.preventDefault()
  fetch("https://api.staticman.net/...", {
    method: "POST",
    body: event.target,
  })
}

I feel that this doesn't work because the API expects an HTTP POST request, with an application/x-www-form-urlencoded content-type, whereas my event.target is a form with loads of React information.

How can I make my fetch() request look exactly like an HTTP POST form submission?

Staticman's maintainer recommends users to start his/her own API instance in https://github.com/eduardoboucas/staticman/issues/317#issuecomment-56525006. — GNUSupporter 8964民主女神地下教會, Feb 01 '21 at 13:55

score 4 · Answer 1 · answered Jan 20 '19 at 22:00

4

I'd rebuild that POST data from your component state using something like the query-string package. Not sure on the specifics of staticman, but I presume you have form values in your react component's state so you could do something like:

handleSubmit = (event) => {
  event.preventDefault()
  fetch("https://api.staticman.net/...", {
    method: "POST",
    body: queryString.stringify({
      this.state.username,
      this.state.subject
    })
  })
}

answered Jan 20 '19 at 22:00

BaronVonKaneHoffen

1,902
1
21
29

Thank you for the tip on query strings! I ended up finding a way to convert FormData to a query string manually (via JSON). Not perfect, but it's working :) – Robin Métral Jan 21 '19 at 14:59

score 3 · Accepted Answer · answered Jan 21 '19 at 14:57

After some research I've found a solution. Here's my handleSubmit function:

handleSubmit = async (event) => {
  event.preventDefault()

  // extract form data
  const formdata = new FormData(event.target)

  // convert FormData to json object
  // SOURCE: https://stackoverflow.com/a/46774073
  const json = {}
  formdata.forEach(function(value, prop){
    json[prop] = value
  })

  // convert json to urlencoded query string
  // SOURCE: https://stackoverflow.com/a/37562814 (comments)
  const formBody = Object.keys(json).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(json[key])).join('&')

  // POST the request to Staticman's API endpoint
  const response = await fetch("https://dev.staticman.net/v3/entry/github/robinmetral/eaudepoisson/master/comments", {
    method: "POST",
    headers: {"Content-Type": "application/x-www-form-urlencoded"},
    body: formBody,
  })
    .then(response => {
      // reset form
      document.getElementById("comment-form").reset()
      // display success message
      document.getElementById("success").style.display = "block"
    })
    .catch(error => {
      console.log(error)
      document.getElementById("failure").style.display = "block"
    })
}

This is what it does:

it extracts the submitted data as a FormData object
it converts the FormData to a JSON object, using a snippet found on SO
it converts the JSON to the expected application/x-www-form-urlencoded content-type or "query string", using another SO snippet
it sends the request to the API endpoint, catches errors and displays a success message

It's probably not the only solution, and if you see something that I could improve, please let me know in the comments or send me a PR!

POST a form to an API with React

2 Answers2