When you’re building your apps, thinking in terms of props, state, components, JSX tags,
render methods, and other React-isms might be the last thing on your mind. Most of the time, you’re dealing with data in the form of JSON objects, arrays, and other data structures that have no knowledge (or interest) in React or anything visual. Bridging the gulf between your data and what you eventually see can be frustrating! Not to worry, though. This chapter helps reduce some of those frustrating moments by running through some common scenarios you’ll encounter.
To help make sense of everything you’re about to see, we need an example. It’s nothing too complicated, so go ahead and create a new HTML document and throw the following stuff into it:
When you have your document set up, go ahead and preview what you have in your browser. If everything went well, you’ll be greeted by a happy yellow circle (see Figure 9.1).
If you see what I see, great! Now, let’s take a moment to understand what this example is doing. The bulk of what you see comes from the
It’s mostly made up of our
circleStyle object that contains the inline style properties that turn our boring
div into an awesome circle. All the style values are hard-coded except for the
backgroundColor property, which takes its value from the
bgColor prop that gets passed in.
Going beyond our component, we ultimately display our circle via our usual
We have a single instance of our Circle component declared, and we declare it with the
bgColor prop set to the color we want our circle to appear. Now, having our Circle component be defined as is inside our
render method is a bit limiting, especially if we’re going to be dealing with data that could affect what our Circle component does. In the next couple sections, we’ll look at the ways we have for solving that.
In Chapter 7, “Meet JSX…Again”, you learned that JSX can actually live outside a
render function and can be used as a value assigned to a variable or property. For example, we can fearlessly do something like this:
theCircle variable stores the JSX for instantiating our Circle component. Evaluating this variable inside our
ReactDOM.render function results in a circle getting displayed. The end result is no different than what we had earlier, but freeing our Circle component instantiation from the shackles of the
render method gives us more options to do crazy and cool things.
For example, you can go further and create a function that returns a Circle component:
In this case, the
showCircle function returns a Circle component (boring!) with the value for the
bgColor prop set to a random color value (awesome sauce!). To have our example use the
showCircle function, all you have to do is evaluate it inside
As long as the expression you’re evaluating returns JSX, you can put pretty much anything you want inside the
Now we get to some fun stuff! When you’re displaying multiple components, you can’t always manually specify them:
In many real-world scenarios, the number of components you display is related to the number of items in an array or arraylike (a.k.a. iterator) object you’re working with. That brings up a few simple complications. For example, let’s say that we have an array called
colors that looks as follows:
We want to create a Circle component for each item in this array (and set the
bgColor prop to the value of each array item). We can do this by creating an array of Circle components:
In this snippet, we populate our
renderData array with Circle components just as we originally set out to do. So far, so good. React makes displaying all of these components very simple. Take a look at the highlighted line for all you have to do:
render method, all we do is specify our
renderData array as an expression that we need to evaluate. We don’t need to take any other step to go from an array of components to something that looks like Figure 9.2 when you preview in your browser.
Okay, I lied. There’s actually one more thing we need to do, and it’s a subtle one. React makes UI updates really fast by having a good idea of what exactly is going on in your DOM. It does this in several ways, but one really noticeable way is by internally marking each element with some sort of an identifier.
When you create elements dynamically (such as what we’re doing with our array of Circle components), these identifiers are not automatically set. We need to do some extra work. That extra work takes the form of a key prop whose value React uses to uniquely identify each particular component.
For our example, we can do something like this:
On each component, we specify our key prop and set its value to a combination of color and index position inside the colors array. This ensures that each component we dynamically create ends up getting a unique identifier that React can then use to optimize any future UI updates.
Check Your Console, Yo!
React is really good at telling you when you might be doing something wrong. For example, if you dynamically create elements or components and don’t specify a key prop on them, you’ll be greeted with the following warning in your console:
When you’re working with React, it’s a good idea to periodically check your console for any messages. Even if things seem to be working just fine, you never know what you might find.
Even though we’re pushing pieces of JSX to an array, just like magic, everything works in the end when
renderData is evaluated inside our
render method. I hate to sound like a broken record, but this is because what our browser ultimately sees looks like this:
Note: If you run into any issues, ask!
If you have any questions or your code isn’t running like you expect, don’t hesitate to ask! Post on the forums at https://forum.kirupa.com and get help from some of the friendliest and most knowledgeable people the Internet has ever brought together!