Last time I was working on a little project and had my little ideas completed in plain JS. This time I had to work harder to understand several aspects that I couldn't analyze properly. The ‘POST’ method in fetch has made me nervous for several weeks at least. Let me explain…
Here is a small example of the POST request:
function handleSubmit(e){
e.preventDefault()
fetch(“http://localhost:3000/projects", {
method: “POST”,
headers: {“Content-Type”: “Application/json”, “Accepts”: “Application/json” },
body: JSON.stringify({name, code: newCode.split(“\n”)})
})
.then((r)=>r.json())
.then((data)=>console.log(data))
history.push(“/projects”)
}
Let's say I already have some data that is located on my JSON server. In my case, I had a JSON file that contained some hardcoded data. But, as we all know data isn't always the same. Sometimes it has to be deleted, added, or changed. The code that is written above helps us to add data to my JSON file.
In order to add data to JSON, we have to make sure that we are using the same format. For example, we can't add two different inputs from <form> to the JSON file, like the one below, if it has only one object name.
JSON:
{
“firstname”: “Kate”
}
That was my first misconception of the POST request. I made that mistake once but I quickly understood that problem.
The next part of it is that fetch request to the server is a bit different. GET request is very simple; you grab the JSON file link, you don't have to specify the method, headers, and body in this request, and then you just get your information. In the POST itself, we have to specify a method which is POST, headers, because you want to make sure that the server to which you send information is a JSON application, and then to specify body. The last one was the most tricky for me.
My problem with the “body” is how to correctly get to new data that I have to send to JSON. As you may know for the POST request you should use useState hook. In the <form> input you should make sure that you have a function that takes in new data:
<input type=”text”
onChange=setState{event.target.value}
value={state}/>
The example above takes the state which is value and tells onChange to set this value to the state. Therefore, {state} has input within itself and should be sent to JSON file. How to do that? Simply use “body” inside of the fetch request and specify there what exactly you are sending, in this case, that would be {state}. But don't forget about JSON.stringify when you are sending in data inside of the body. That part took me some time to understand.
The last part of the POST request was Submit. I understood that button in the form should have some sort of action when the state is updated, data collected and it's ready to be sent to JSON server. I always knew that I have to use prevent default on it so it could prevent many fetch requests but I always left the fetch itself outside of the buttons function. It led to many failed fetch requests and a non-working button. Only after a couple of POST requests have I understood that those changes have to be applied on the click on the button itself.
There are still many blind spots for me in React but with the proper amount of practice, I am sure I will get better.
