Conditional Rendering (Javascript)

Background

In Javascript, a method called “fetch” allows the client to retrieve data from an API which then can be manipulated (depending if the retrieval was successful or not). For the technical definition and additional information, it can be found here.

The retrieved data, also known as a Promise, can be manipulated via .then() methods. Additional information on a Promise and the .then() methods can be found here and here, respectively.

For the sake of brevity and relativity to the blog, the baseline knowledge is that data is being retrieved from the API (fetch), which then is manipulated to “useable” data (.then()). The code below is an example of how these two methods work hand-in-hand.

Rendering Issue

To follow up with the example show above, a kid will have the following properties in JSON format based on the API below:

{

• data: [
• {
• id: “20”,
• type: “kids”,
• attributes: {
• name: “Bob”,
• votes: 0,
• throne: false,
• in-chair: false,
• img-url: “a_random_picture.png"
• }
• },
• {…},
• {…},
• {…},
• {…},
• {…},
• {…},
• {…},
• {…}
• ]

}

Please note that each {…} represents a separate set of properties for a different kid.

For the purposes on conditional rendering, we would focus on the in-chair attribute. In this scenario, if the in-chair is false, then the kid would be part of a drop down menu whereas if the in-chair is true, the img-url of the kid will be displayed on the window. The kid can only either exist in the window or within the drop down menu. In order to transfer from the drop down menu to the window, the kid is selected from the drop down menu. To transfer from the window to the drop down menu, the client must click on the “hide” link for that specific kid.

The following code below renders all of the kids with their respective img-url onto the window when the function allKids() is invoked:

In order to hide the kid, an add event listener was added to listen for a click event when the “hide” link is pressed for that specific kid (line 26 in the above code). To achieve this, the following code is supposed to accomplish that:

The fetch request above looks slightly different than previously shown but what it does is that it is updating the information in the API based on the argument that is passed into JSON.stringify() (line 10). After the API is updated, render the remaining kids that are not hidden by calling my allKids function… except this is still rendering ALL of the kids, including the kids after clicking on the “hide” link.

**Please note that there are additional logic happening in the backend controllers that are not included but does not affect the overall purpose of the fetch request.**

This was the thought process while attempting to debug the code:

Invoke the allKids() function → Renders all the kids → Click on the “hide” link → Invoke the allKids function within the .then() method after my fetch request → Render all the kids that are not hidden

Rendering Solution

After staring at the code with my pair programming partner, and with a huge help with from my technical coach, my technical coach guided us to look at our allKids function. In essence, the allKids function will always be pulling ALL the kids no matter what, regardless of clicking on the “hide” link. This is because the code iterates through the ENTIRE API. The rendering does not take into the attribute of “in-chair” at any point, which helps dictate whether the kid is to be rendered onto the window or the drop down menu. The issue was literally right in front of our faces.

So… the next hint is to implement the “in-chair” attribute in our allKids function. If you look at the value of “in-chair”, the type of value is a boolean. What kind of statement uses booleans for evaluation? One of the universal programming language statements: if/else statements! As a quick reminder, one of the deliverables is to either render the kid within a drop down menu or onto the window, never simultaneously. Since there are two outcomes, an if/else statement sounds the ideal way to accomplish this.

The code below is the updated version of the allKids function with conditionals implemented:

In the code above, the code added a new constant, “kids”, which is where the HTML element of the drop of the menu resides. In lines 10 and 11, the inner HTML of the two strings are set equal to empty strings in order to avoid rendering duplicate kids. Without those two lines, whenever the client clicks on the “hide” link, the kids that are not hidden will be rendered again since they were never removed from the window. You can think of setting the empty strings as a clean slate for the window.

Lines 17 and 36 is where the magic happens. Line 17 sets a condition that if the kid’s attribute of in-chair is true, then render that kid to the window. All of the code between lines 18 and 33, inclusive, is the same as the original allKids function. Line 36 takes all other cases, which is rendering them to the drop down menu, for this example. Please note that for the drop down menu, only the name of the kid is rendered, and NOT the img-url. With the if/else statement implemented, the deliverable was achieved.

Key Takeaways

1. As the developer, you have the ability to choose how you render what you want to show on the window. For this coding lab, I thought we had to render everything at once (since that was learning pattern at this point in time). Implementing conditionals when rendering a page is one way to manipulate what you want to show on the page.
2. Don’t be afraid of changing “working” code. What I mean by this is that even though the code works for one deliverable (i.e., rendering all the kids onto the window via the first iteration of the allKids function), it is rarely the final version for that block of code as it may not work for another deliverable. I was in the mindset that since the allKids function worked for one deliverable, I assumed that the code was finalized and should not be altered. If the code works for one deliverable but not for another, is it really “working” code at that point?