Fetching and submitting forms to server in react

Sulfranc — Thu, 22 Sep 2022 20:29:47 +0000

Thinking about how far I have gotten in my coding journey and now looking back I see that I have improved a lot since I started. Now I'm on my second project and I feel great about it. Out of all the problems I ran into while creating my project one of them stood out the most. The problem that stood out the most was submitting a form to the server. I want to explain my process of completing this task and how it felt to put everything together to finally complete a project.

First off let's talk about what my project is. My project is called the Jokes app it gives out random jokes. It gives you the answer to the joke and lets you create your joke on the creates jokes. The new joke you create also gets added to the list of random jokes. Doesn't this sound awesome?

Alright, to get started I made a db.json file to hold all the information about the random jokes. This is how it looks:
{
"Jokes": [
{
"id": 1,
"joke": "Why did the scarecrow win an award? ",
"answer": "Because he was outstanding in his field."
},
{
"id": 2,
"joke": "Why did the melon jump into the lake? ",
"answer": "It wanted to be a water-melon."
},
{
"id": 3,
"joke": "What do you call a pig that does karate? ",
"answer": "A pork chop."
},
{
"id": 4,
"joke": "How does the ocean say hello? ",
"answer": "It waves."
},
{
"id": 5,
"joke": "Where do you learn to make banana splits? ",
"answer": "At sundae school."
},

These are all the preset jokes that will be in my random jokes array.

Side note: You must have an id number attached to the data for your server to run correctly.

I later installed JSON Server using this command "npm install -g json-server".
Then I started the JSON Server with the command "json-server --watch db.json".

Now my server is up and running. Any POST, PUT, PATCH or DELETE requests, or changes will be automatically and safely saved to db.json.

Now I started working on my fetching request. I used this fetch request to retrieve the information from my db.json which are my jokes like this:

useEffect(()=>{
fetch("http://localhost:3000/Jokes")
.then(resp => resp.json())
.then(data => setJokes(data))

.catch(console.error())
},[]
)

To set them in my setJoke variable array.
So now that I have my joke saved in that variable, I can manipulate them how I want. I made them later pop up on the screen any time my get random jokes button was pressed in random order.

Now for handling the submit:

function handleSubmit(e){
e.preventDefault()
const newJoke = {
...formData
}

    console.log(formData)
    fetch('http://localhost:3000/Jokes', {
    method: 'POST',
    headers: { 'Content-type': 'application/json', },
    body: JSON.stringify(newJoke),
    })
    .then((resp) => 
       {
      console.log(resp)
      console.log(newJoke)
      return resp.json()}
    )
    .then(onAddJoke)
    .catch((error)=>console.log(error))

I created the handleSubmit function to save the text that was in the formdata in the newJoke variable. Then I created a POST request for the submit button. When the submit button gets pressed the data gets updated on the db.json with the new joke.

This is how I was able to correctly handle submits and fetch data in my project. Now looking back at everything it was fairly easy to create.

Cat liker blog

Sulfranc — Wed, 16 Mar 2022 19:23:28 +0000

** The idea for this project took a long time to come to me. I was googling different APIs for a couple of days, I kept reviewing the project guidelines trying to incorporate everything into one application. After thinking about previous assignments I completed, I finally decided on making an application that is kind of like what youtube has in place when we watch videos. When we watch a video it loads and youtube gives us an option to like or dislike it. So from there, I started looking for APIs that had pictures like movie APIs. Then I found the Cat api and this is how the Cat Liker was born.

Now that I have my API I started working on my HTML and CSS. Trying to make my application look the way I want I ran into a couple of problems. One of the problems was making sure my IMG filled in the IMG tag exactly how I wanted. Another problem was my button wasn’t aligning to the center. After editing my HTML a little bit I had everything how I wanted it to be. Finally it was time for the hard part.

Writing the Javascript took me a while to complete, in my project I had to start off with the getpic function because that function was the core for most of my other functions. One of the things the getpic function does is calls fetch. The fetch requests data from the Cat api and then gets a response from the Cat api. As you can see below:

function getPic(){ // gets pics from api
   fetch('https://api.thecatapi.com/v1/images/search')
       .then(resp => resp.json())
       .then(data => {

When the response gets back the data gets stored in variables
.then(data => {
           let catImgUrl = data[0].url // sets the url to a variable
           picture.innerHTML = "" // clears img
           let img = document.createElement('img') // creates img in html
           img.src = catImgUrl            
           picture.appendChild(img) // makes img a child of #picture

After I had my function working correctly I made another two functions. One is called the like counter the other is called the dislike counter. What they both do is count how many clicks each button gets and displays them back on the screen so the user can see, they also change the picture when either one is clicked. Here is a how the code looks:

function dislikeCounter(){
       dislikeCount++
       dislikepic_btn.innerHTML = `DisLike👎 ${dislikeCount}`
       getPic()
   }

   function likeCounter(){
       likeCount++
       likepic_btn.innerHTML = `Like👍 ${likeCount}`
       getPic()
   }

Next I started writing my next event listener which is a submit. I wanted to get a user's input and put it back on the screen. So I decided to add a comments section under the pictures. I started adding an event listener to my form and immediately started to invoke a function and added the prevent default to stop the submit from taking actions as it normally would. After that I grabbed the user input from the application and created a new html element. After the new element was created I set the inner value of the element to the user input.

commentForm.addEventListener('submit',function(event){ // add user input to screen
 event.preventDefault()
 let catCommennts = event.target.commettext.value
 let commentBox = document.createElement('p')
 commentBox.textContent = catCommennts
 document.getElementById('userinputs').appendChild(commentBox)

The easiest part was creating the download content event listener all i had to do was add the get pic function to keep loading and image as soon as the page loads

document.addEventListener('DOMContentLoaded', () => {
   getPic() // makes img appear when page loads

I really learned a lot trying to complete this project. I learned nice researching skills and knowing exactly what to ask to get the information that I'm looking for. I also gained more experience using the debugger and debugging things in the console. I overall had a great experience working on this project.
**

DEV Community: Sulfranc

Fetching and submitting forms to server in react

Cat liker blog