Using React.js and onClick

onClick and State

For our tutorial today we are going to be going over an exercise that was given to me by Launch Academy as an introduction into our week on React.js.

We will be creating a simple pop-up ad today. We want our pop-up to have a <form> element (we won’t be sending this data anywhere right now) as well as a <button> element. Our Button will be the X that we want to click on to close out the Pop-up Ad. When the button element has been clicked on 3 or more times, we want a Confirm box to pop up and ask the user, Are You Sure?

Here is what we will be creating today, in all of its horrifically colored glory:

f222.png

We already know how to add <form> elements to a webpage and how to take in that user information. This part is not difficult. We also know how to create <button> elements and render them to the page. What we need to focus our attention to is, how do we keep track of all those clicks.

Resources:

The answer to this problem is simple – State. We need to not only set State but we need a way to both alter that State as well as keep track of what the State is.

To do this, we first need to initialize our State. We do this in our Constructor after super(props) by using the following syntax: this.state = {} e.g.

s1

Resources:

 

You can see that we have set State here by declaring this.state and now anything inside of our bacon {} or squigglies (whichever you prefer) will be our state. It’s important to know, as you will encounter this the deeper into React that you go, this.state = {} can contain multiple values. For instance, you could have clickCount: 0, favFood: 'hamburger' etc

Now that our State has been initialized we need to create a function that will alter that State.

Note: our function will work in tandem with an onClick function being passed to the specific element in question. That is to say, onClick will call our function, when the user clicks on the element that we add onClick to. It would look something like this:

f2f2f2

Back to our function, let’s create a function that will alter the state for clickCount : 0. If you look back at our screenshot of our State, you will see that clickCount is initialized to equal 0. We have initialized this to be zero because the purpose of this exercise is to keep track of our clicks, so when the user loads up the page, naturally zero clicks have occurred so it is safe initialize it to 0, in other circumstances it may make sense to set your given state to null.

Let’s now create this function and use a name that is descriptive of what it will be doing, in this case: countClicks(event). Nice! What do we want to happen when this function is called?

  • Alter the State of our Component
  • Initiate a Confirm box if our State value is >= 3

To do this, let’s first create a new variable inside of our function called newClickCount this will give an update representation of our State. We will set it equal to our current state value + 1. Now we can alter our current state to reflect the new amount of clicks by saying this.setState( {clickCount: newClickCount} ).

From there, we will use a simple conditional (just if, no else needed) to check on our State. we can do this by saying if (newClickCount >= 3) {confirm('Are You Sure?')}

If reading this confused you, let’s take a look at a screengrab:

gg3g3.png

You can see that in our screengrab a few different things are happening here, let’s recap:

  • State is initially set. In this case clickCount : 0. In Pseudo-code, we are saying, there haven’t been any clicks on this component…yet.
  • We have a function that will increment our current State by 1 for every time that it is called.
  • Once the new State has been set, our function will then check to see if the new value is >= 3. If it is, it will then run confirm('Are You Sure?') if our State value does not satisfy the requirements of our if statement we will break out of our function.
  • Our function, countClick(event) {} only runs if it is being called. The way we call this function in our code is by adding it to our button element.
    • onClick will run anything it is given, when clicked. In this case, we are passing a function to onClick.
    • It is important to note that when referring to anything that was defined outside of our render () function we need to prepend it with this.otherwise, we will not be able to access it.

Every time our user clicks on our <button> element, onClick will run. Every time onClick runs, countClick(event) will run. Every time that function runs, we will update our state until we get to a value of 3 or greater at which point a Confirm box will appear.

Resources:

Congratulations, you just successfully added State to a React Component and then altered that State by using onClick to call on a function defined outside of your render() function!

giphy

If you are a total madman and want to make sure your Pop-up Ad gives you a seizure once you have completed it, then use the following CSS:

THINGY.png

 

Submit a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s