State of the App

Hello, world! No, this isn’t a total reset…
Although, it kind of feels that way after spending the last portion of my program learning Computer Science principles. I am actually tempted to delve further into those concepts, but I shall refrain from that for now – as I shall deliver on my promise to cover state in React!

However, I will digress for a brief update:

My presentation at Palm Beach JavaScript went quite well! I was happy to meet a number of people who found my talk informative and liked my latest app!
I was a returning guest on Bang! Important afterward as well - feel free to give it a listen!

Amidst these events in the coding community, I managed to complete the rest of my bootcamp curriculum and, as of April 27th, I am officially a graduate from Thinkful! The last mock interview was a doozy – Linked Lists, HashmapsBubble sort vs. Merge sort… in-order, pre-order, and post-ordering in Binary Search Trees… but I made it, and I am already cracking to get out into the wider world of web development and apply my skills at a new job! Good thing I created the perfect tool to help me with that...

Okay, then – onto another React example!

We’ll start out with the same program as last time:

ReactJS Boxes App

We have the main component, App, which renders a component, OuterBox,
This is also the same OuterBox, complete with its smiley prop. However, instead of using props, in this example, we will be using state. To get a sense of how this works, let’s take a look inside the OuterBox component:

ReactJS App OuterBox Component

Last time, we simply had a render method which returned a component, InnerBox. This case is a heck of a lot bit more complex, so let’s see how each method works.

The first method is aptly titled constructor – constructors are commonplace in object-oriented programming. Remember that while Javascript is not an object-oriented language by nature, for our purposes here, we are helping ourselves to a double-dose of syntactical sugar in the case of Javascript ES6 Class syntax.

As I mentioned last time, a class is used to create objects with certain innate properties. Each time an object of a particular class is created, the constructor - appropriately enough – constructs the object with these designated properties. In React, it is necessary to call super first, which obtains the props from the superclass of this class. In other languages, a superclass may be a more broad type of a certain class (eg., superclass ‘vehicle’ has subclasses ‘car’, ‘truck’, and ‘motorcycle’). We then say that any subclass extends the superclass. In this case, the superclass is actually the pre-defined structure Component from the React library, which is why we see the extends Component in the header for our class components.

React magic aside, in this example I added a this.state property, which is our focus presently. (Reminder: this is necessary to target the particular object being called - it allows us to use the same methods for any objects created with this class. this would not be necessary if it were a functional component).

State proves an interesting term to define in programming without being circular (state describes… the state of the program, right?). Therefore, a useful synonym might be status. In other words, the state of a component in React is akin to its current status. The state is said to maintain the component (or app more generally) and thus it keeps track of any updates to its status.

For example, if the app in question is a game which requires keeping score, the state of the app might contain the scores for each player. The key element is that the scores will need to be updated over time (ie. when a player scores). State is what will keep track of the scores each time they are updated.

A common practice for state in a React app is to update with event handling. In OuterBox, we have the state as an object with key clicked set to false by default. Below that, we have a method for handling click events: handleClick. Notice that the sole function of this method is to change the clicked property to true. It even uses React's own object method: setState. This is because changing the state directly is something you should never do in React. If you alter the value of state directly, React does not notice the update and will fail to track state accordingly.

Finally, we are back to our render method, which this time renders an InnerBox component with two properties:
onClick, which is an event listener, just like it sounds. It is set to run the method handleClick when the InnerBox is clicked.
This would be equivalent to $('.InnerBox').on('click', () => this.handleClick() )) in jQuery.
The other prop is named clicked, and its value is the boolean for this.state.clicked - this will be false by default, until it is clicked and is turned to true when the InnerBox is clicked.

Notice that the reason we give these props to InnerBox is because we want that component to be able to interact with its parent component, OuterBox, because the latter maintains the state of the app.

So, finally, let’s take a look at InnerBox:

ReactJS Boxes App InnerBox Component

Just like the example in the last post, it is a simple functional component that returns a smaller box inside of the OuterBox. The onClick event handler of said box is given the value of props.onClick. There's a little bit of onClick-ception going on here - In other words, when InnerBox itself is clicked, it fires off the prop onClick that was passed down to it from OuterBox.

If we look above the return statement, we notice a conditional – this is where the other prop of InnerBox comes in. Remember, it was a prop called clicked, set to the value of this.state.clicked - which, if true, will display ‘Clicked!’ instead of the box.

ReactJS App onClick Components

…and there you have it!

So, one more time for good measure:

1) OuterBox holds the state, which determines whether clicked is true or false (set to false by default). The way to change clicked from false to true is by accessing the handleClick method, which uses setState to update this.state.clicked to true.

2) In order to make all of this happen, InnerBox has to communicate with its parent, OuterBox. This is done by passing down props to InnerBox from OuterBox:
onClick, which signals what the OuterBox should do when InnerBox is clicked. The other prop is clicked, which passes down the state of the app: either clicked is false, or it is true.

3) InnerBox takes this information and determines whether to load the box if it has not been clicked or the message 'Clicked!' if it has been clicked based on its prop clicked being either false or true. If it is false, InnerBox renders the box; the box has its own click event which will fire the other prop - onClick passed down from OuterBox when clicked, updating the value of clicked in state (back in OuterBox) to true. With a value of true, InnerBox instead displays the message ‘Clicked!’

ReactJS Boxes App Click

Until next time!

Back to Posts