Not Knowing the Small Details
Background
Currently I am working on a side project, called Dice Burglars, that was inspired by a tabletop game that I purchased recently called Furglars. Essentially, the purpose of the game is to be the first to accumulate 15 points. The player accumulates points by holding onto dice that they rolled for at least one full round. A round is defined as all players taking their turn before it’s the player’s turn again. Throughout the round, depending on what the player rolled, the player may be able to steal dice from other players.
While I was brainstorming on how to implement this stealing feature, I assumed that a drag and drop function would be the best course of action. Drag and drop will give the player the ability to steal from any player of their choosing. Before diving into my code and attempting to create this drag and drop feature from scratch, I decided to do some research if a function like this already existed since it seemed like a pretty common feature in general (no point in re-inventing the wheel). And lo and behold, that was how I found React DnD.
To not jump ahead, before I could implement a drag and drop function, I would need to render the component that calls that function, which is where I came to my first impasse.
React DnD (React Drag and Drop)
I mentioned React DnD in my previous blog and instead of jumping right into code and adapting it to fit my program’s needs, I was slowly doing a code along with the tutorial provided, making sure I understood the rationale behind every step while changing variable names to be consistent with my program. Below is a screenshot where I came to my first impasse:
This DieSquare function is the same as the Square function in the React DnD tutorial but the only difference is changing the colors from black to red and white to black, including the variable names and strings.
To provide the bigger picture, the following two screenshots are attached to see how all the components are intertwined. As mentioned earlier, the function names were changed to be consistent with my program.
Below is a screenshot of how the Die is rendered.
DieSquare Parameter Confusion
In the DieSquare function, its parameter is an object with two key words: “red” and “children”. I understood that the parameter is a destructured object in which it will receive its values when I invoke the DieSquare function. In the second screenshot, line 8, is the following:
<DieSquare red>
There is no value for the key word “red” and the key word “children” was never used, yet the application compiles and rendered without an error. Why?!
Thus began my furious journey of Googling and reading documentation.
As a quick sanity test, I changed the key word from “red” to “blue” to see if it would crash the application. It looked like the following:
<DieSquare blue>
Below is a screenshot of what rendered:
I was simultaneously surprised and not surprised. I was surprised that the application actually compiled and rendered without errors because I thought there would be an error for not using the key word “red”. I was not surprised because since the application did compile and rendered, the colors were inverted as it was expected from the code in lines 5–6 in the DieSquare function.
Destructured Default Values
After scouring Google for the next few minutes, I came across this documentation. The following sentence cleared everything up for me:
“By default, array and object are set to true for both VariableDeclarator and AssignmentExpression.”
I changed back the key word from “blue” to “red” and input a console.log(“CONFIRMING DEFAULT VALUE:”, red) in line 4 of the DieSquare function to confirm this.
The screenshot above confirms the default values and I was comfortable enough to move onto the next confusion.
React Children
The next step was to debunk the confusion of the key word “children”. My initial assumption was that it was a generic variable name, like how “red” is, and changed it from “children” to “derp” where “children” was referenced (lines 3 and 17 in the DieSquare function).
However, the results were not what I expected. The window did not render anything, leaving a white slate. I figured that “children” might be a reserved word for React and decided to once again, scour Google.
My research brought me to the React documentation, where I found the answer I was looking for. From the React documentation:
“props.children is available on every component. It contains the content between the opening and closing tags of a component.”
As another quick sanity check, I decided to do a console.log(“WE ARE THE CHILDREN:”, children) on line 4 of the DieSquare function. The following screenshot is what was shown:
The “type” is Die(), which is exactly the Die component within the DieSquare function.
Key Takeaway
Initially, when I came across the “red” and “children” key words confusion, I thought there was some gap in my knowledge of React or Javascript, in which I had teach myself new concepts to fill in. After reading documentations and Googling, it was not that but rather nuanced details (default values of destructured objects) or not knowing specific methods already existed (React children). This isn’t my first time, nor will it be my last, when it comes to these type of issues but I welcome them to expand my breadth and depth of knowledge.
