React part 4

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”

this is what the browser looks like.

When we refresh the browser the state says Jonathan under hooks:

it will change the moment I hit the click button “name getter”, right now!

TADA, it works great and that's just one of useful ways to use react dev tools…Use it to make sure all the data is being passed to the right areas.

Well I hope you learned something see you all next time.

I did delete that last input field and last button I created. SO, your home should look like this before moving on.

Javascript….

Javascript 1 (variables and data types)

Javascript 2 (numbers and strings)

Javascript 3 (bracket notation and 20 diff string methods)

Javascript 4 (functions and how they work)

Javascript 5 (hoisting, comparison operators, and if-else statements)

Javascript 6 (diff. Equal signs, null, and undefined)

Javascript 7 (logical operator, &&, || and ternary operators)

Javascript 8 (switch statements and arrays)

Javascript 9 (10 commonly used arrays in javascript)

Javascript 10 (8 different Math. methods And parseInt Usage)

Javascript 11 (for loops and nested for loops)

Javascript 12(while loops and for..in and for..of loops)

Javascript 13(8 diff array methods)

Javascript 14(objects and ways to use objects)

Javascript 15(JSON and fetch request)

Javascript 16(“this” keyword)

Javascript 17(strict mode and error handling)

Javascript 18(setInterval/setTimeout and Dates)

React…

React part 1 (How to start a react app)

React part 2 (components and dynamic values)

React part 3 (Multiple components and small styling)

React part 4 (click events with functions and react dev tools)

React part 5 (link to: useState hook and how to output lists in react)

React part 6 (Props and reusable components)

React part 7 (passing functions as props and use effect hook)

React part 8 (continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch)

React part 9 (Fetching data with JSON)

React part 10 (loading bar and fetch errors)

React part 11(custom hooks)

React part 12(React Router Dom, Exact, and Links)

Social Media…

Github

Instagram

Facebook

Linked-In

Medium

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonathan Bleibdrey

Jonathan Bleibdrey

Software engineer, Creator, Ball of Energy