Event Handler onClick

rayzana280 — Wed, 19 Jul 2023 18:41:34 +0000

While coming to the end of Phase 2 in Flatiron School, React is a big topic that could be talked about for hours or even days. But it's an important thing to learn about. React is a library that lets you build user interfaces out of components. Components are reusable code that take in props and return react elements(JSX). Now that we have an image on what react and what a component is now we can talk about events. Since React is built entirely out of javascript we are still handling html like elements. As you guessed it events are the same as event listeners.

Step 1

There are few event handlers you could use such as onSubmit, onChange, onClick, onFocus etc. But to have a better understanding will start with onClick. First we need to add what event handler we are using on the JSX and that would be the button.

An event handler will be triggered when the user interacts with the button since we are using the onClick event.

Step 2

Now since we are passing the event handler in the JSX element, we have to make a callback function for what we want the button to do when a user clicks on the button. So we are going to create a callback function called clicking for the button and have it console.log "button has been clicked".

Step 3

Now that we have the callback function, we have to add this callback function to the event handler. After adding the callback function, now when we click the button the event handler will invoke the callback function to console.log "button has been clicked".

This is how you could use an event handler of onClick. Pretty simple and there are many ways you could use this button, but let's get into more depth on what you could do with the onClick button.

CallBack Props

Step 1

You don't have to make the callback function in the same component as your event handler is being used. You could use the callback function from a different component and use it in the component where your event handler is being used. In order to make this happen we need to pass the callback function as a prop. But we could only pass down props from the parent component. Right now my parent component is the App component, so we can create the same function clicking as a prop called "buttonClicked".

Step 2

Back to the Click component, now we will be able to use the buttonClicked prop and get the console.log("button has been clicked").

Parameter

For the event handler callback function, the callback takes a parameter. The parameter would be "e":

What this parameter will do is give you the information about the event handler. We have the parameter set up already lets console.log the parameter and is the information of the event handler.

If you are using onChange or onSubmit this parameter will be used a lot , so it is a good idea to get very familiar with this parameter and learn what information you access while using these event handlers. One major information you could access is the value of the event. The value of what the user is submitting or the changes the user is doing.

Blog Phase 1

rayzana280 — Mon, 03 Jul 2023 04:09:43 +0000

Being a beginner to the world of Software Engineering is very challenging. Especially for the people who had absolutely zero experience in coding just like me, but after reading and being a Flatiron student I'm here to give a better understanding with communicating with the server. A built-in JavaScript method that is very important to learn, that method is Fetch.

Fetch is a built-in JavaScript method that will retrieve a promise from an API that later can be used as an JSON object. Once you have that data you will be able to use the data depending on its usage.

Step 1

"Fetch()" takes one argument and that's the api path you want to fetch. Here we are using a API that will gives random cat facts. It will look something like this:

what we are doing here is basically using the url as an argument for fetch and what we are receiving back is a promise. To see if we are getting a promise back we "console.log()" the the "fetch()".

Step 2

Once we have a promise we have to resolve this into to response to then later turn into an JSON object. But right now we have to resolve the promise and we are going to use a promise method which is ".then()". The method ".then" takes in an argument response. Now let's make sure we are getting a response back. We could make sure we are getting a response back by doing another on "console.log".

Now that we have a response object we won't be able to use it the way we want it to because it isn't a "JSON" object since we are working with JSON data. Now we are going to use a method which converts it to an "JSON" object and that's ".json()" .

Now that we have finished using ".json()" let's not forget this will give us another promise so we are not finished yet.

Step 3

After receiving another promise let us finally use that data by using another ".then" and this specific ".then" it will take an argument of data that we want to use.

Let's make sure we getting the data back by using a "console.log"

Now you are able to use what you are working with.

Step 4

There's one more step we have to complete using the ".catch" method. By using this method javascript will be able to catch an error incase if the server fails to give us data or we aren't getting a promise, etc. Also ".catch" takes an argument which would be the error. We could "console.log" the error or we add an alert to let the user know about the error.

As you can see I ruined the API path so I got an alert using ".catch()"

If we want to catch the error and know where this error is coming from we could use .ok to show us if the response is the error. We will use an if statement to "console.log('working')" if the response meets the condition, but we also add an else to "console.log" a message saying "no working" if the response is not working.

More Info On Fetch

Now that you have an idea on how fetch works, let's say you want to post data, patch data and delete data, then fetch is going to take another argument which will have us doing a few things to set up for the method we want to use. First we need to pass in an HTTP method that we are going to use. In this case we are using our own "API" and we are going to use the "POST" method. Let's not forget our data base has no data.

Now we need to pass the body in order to "POST" what we want inside the body. The value for the body is "name: bob". After knowing what we want to post we need to "json.stringify" the object that we pass for the body.

This step on the upcoming steps are needed because without these steps, whatever you want to post will not appear on the data. Next we are going to add a headers, this is telling Fetch that we are passing "JSON". For the value we are going to pass an object and inside the Object we are going to add "Content-Type": "application/json". After following these setups we are going to see what we wanted to post on our data that we are using.

Hope this short summary of "Fetch" was very useful, until next time.

DEV Community: rayzana280

Event Handler onClick

Step 1

Step 2

Blog Phase 1