React part 4

7 min readMay 3, 2021

Today we talk about “click events” with functions and something called React Dev Tools.

When we have a website there are loads of events going on the website. They are what we call a click event, or a hover event, or keyboard events, or even form events. (There are lots of them, go here for all events)

But here we are only going to look at click events (mostly)

click events:

Let's start off by making a “button” tag in the “home” component, right under the h2, and some text saying “click me”.

This is what it will look like in browser.

It won't look identical to this only because I throw CSS on it. You can check out my CSS here if you want. (It will still have the same function though)

now I want to “react” when a user clicks this button. We can implement an action by placing a function in between the curly braces. We usually call it the “handleClick” function (since it will be handling the click event), you can call it whatever you want but, this is best practice. We then use a console.log(“ we made it to the click event.”) to show that it indeed fired. (If this is too easy, good, its supposed to be I want this to be super easy for anyone to learn.)

Moving on!

The “handleClick” inside the button will fire every time you click on it, every time. Something to note is we don't invoke the “handleClick()” ←like this, with parentheses, it would fire every time you refreshed the page automatically.

Forgive the small text in photo.

All you need to know is that we clicked the, “click me” button in the browser, and it outputted “we made it to the click event” in the console.

Now, if we wanted to pass in an argument to that function we couldn't do it. The older way we would do this “someFunction(“argument name”)” ←this will, once again, make it fire automatically. you would have to wrap it in an anonymous function, which I will show you down below.

Ok here we make another function called “handleClickAgain” and we pass it into an anonymous function, which is the second button, in which we call “click me 2".

<button onClick={() => {nameOfFunction(“argument goes here”)}}>

then that “taco hernadez” gets passed to the “handleClickAgain” function and down into the console.log and we should see:

It worked.

Ok moving on!

One last thing I want to mention is something called an “event” object or parameter. We get access to these “event objects” when an event occurs, so we automatically gain “event” as the first parameter of any function getting passed into a “click event” or any “event” that has some useful data.

If you see above we never pass “handleClick” an argument called “event” but, we do pass it into the second button since we don't have access straight away in the first handle click.

I'll show you what gets returned with that object down below:

Here we see that we have all these properties attached to this “event” object if we wanted to use them. (click here for more event properties)

One of the most used event properties is the “event.target.value” that gets us the value of what's inside the box or inside the input. step by step by step break down. It gets the event, then it returns the object, we find the property of the target input, and then inside that we have the value, usually some type of string.

If you want to search for “event.target.value” it would go like this:

EVENT (syntheticBaseEvent)

TARGET(click drop down)

scroll down to,

VALUE (there it is, your string of tacos, which we typed above)

Ok well that's all I have for now, thank you for your time and I know at least one person is learning from this, so thank you!

Moving on!

React Dev Tools:

I'm just going to go over this real quick and how it's helpful.

you can find it on the chrome store here!

Now once installed we open our “inspector” in our browser. (by right-clicking, then go down to inspect, and open it up.)

you should see something like this, more or less.

At the very top of it, you will see Elements, console, sources, etc… at the end of that line, you will see arrows, click that arrow. Now go-to components. (that's what we will mostly be using.)

Should look like this, here we can see a few things that will help you in your coding game.

First, you will see our tree from the app component, it has our Navbar, Home, and Footer inside our application.

If you hover over the components it will highlight your HTML in your browser as well. We also have some buttons on the right that I will go over.

stopwatch: I've never actually used this one and am pretty sure outside the scope of this tutorial! (you can google it, sorry off to a bad start! haha)

eye: this will direct you straight to the dom on where that component is :

clicked on app and then the eye logo and brought me here.

bug: this will log out all the information into the console, like so.

arrow: this will take you to the source file for that component and you can do edits straight in the browser.

one last thing I want to show you about the dev tools is that it will show you the state, hooks, and props in oyur applications(great for seeing where your data is etc.)

For this example, I added a simple hook with a “name attribute” and made a new button called “name getter”. all it does is change the name in the state from “jonathan” to “BIG SUACE”