[REACT](https://www.kirupa.com/react/index.htm) [BOOK](https://www.amazon.com/exec/obidos/ASIN/0134546318/kirupacom) # Going from Data to UI in React by [ kirupa](https://www.kirupa.com/me/index.htm) | filed under [Learning React](https://www.kirupa.com/react/index.htm) When you are building your apps, thinking in terms of props, state, components, JSX tags, `render` methods, and other React-isms may be the last thing on your mind. Most of the time, you are dealing with data in the form of JSON objects, arrays, and other data structures that have no knowledge (nor 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 article will help reduce some of those frustrating moments by running through some common scenarios you'll encounter! Onwards! ## The Example To help make sense of everything you are about to see, we are going to need an example. It's nothing too complicated, so go ahead and create a new HTML document and throw the following stuff into it: ```js From Data to UI
``` Once you have your document setup, go ahead and preview what you have in your browser. If everything went well, you will be greeted by a happy yellow circle: ![](https://www.kirupa.com/react/images/one_yellow_circle.png) If you see what I see, great! Now, let's take a moment to understand what our example is doing. The bulk of what you see comes from the `Circle` component: ```js class Circle extends React.Component { render() { var circleStyle = { padding: 10, margin: 20, display: "inline-block", backgroundColor: this.props.bgColor, borderRadius: "50%", width: 100, height: 100 }; return (
); } } ``` It is 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. It takes its value from the `bgColor` prop that gets passed in. Going beyond our component, the way we ultimately display our circle is via our usual `ReactDOM.render` method: ```js ReactDOM.render(
, document.querySelector("#container") ); ``` 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 in. Now, having our `Circle` component be defined as-is inside our `render` method is a bit limiting - especially if you are going to be dealing with data that could affect what our `Circle` component does. In the next couple of sections, we'll look at the ways we have for solving that. ## Your JSX Can Be Anywhere, Part II In the [Meet JSX...Again](https://www.kirupa.com/react/meet_jsx_again.htm) tutorial, we learned that our JSX can actually live outside of 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: ```js var theCircle = ReactDOM.render(
{theCircle}
, document.querySelector("#container") ); ``` The `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 having our `Circle` component instantiation freed from the shackles of the `render` method gives you more options to do crazy and cool things. For example, you can go further and create a function that returns a `Circle` component: ```js function showCircle() { var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363"]; var ran = Math.floor(Math.random() * colors.length); // return a Circle with a randomly chosen color return ; } ``` In this case, the `showCircle` function returns a `Circle` component (boring!) with the value for the `bgColor` prop set to a random color value (awesomesauce!). To have our example use the `showCircle` function, all you have to do is evaluate it inside `ReactDOM.render`: ```js ReactDOM.render(
{showCircle()}
, document.querySelector("#container") ); ``` As long as the expression you are evaluating returns JSX, you can put pretty much anything you want inside the `{` and `}` brackets. That flexibility is really nice, because there is a lot of things you can do when your JavaScript lives outside of the `render` function. A LOT OF THINGS! ## Dealing with Arrays Now we are going to get to some fun stuff! When you are displaying multiple components, you won't always be able to manually specify them: ```js ReactDOM.render(
{showCircle()} {showCircle()} {showCircle()}
, document.querySelector("#container") ); ``` In many real-world scenarios, the number of components you display will be related to the number of items in an array or array-like (aka iterator) object you are working with. That brings along a few simple complications. For example, let's say that we have an array called `colors` that looks as follows: ```js var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363", "#85FFC7", "#297373", "#FF8552", "#A40E4C"]; ``` What we want to do is create a `Circle` component for each item in this array (and set the `bgColor` prop to the value of each array item). The way we are going to do this is by creating an array of `Circle` components: ```js var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363", "#85FFC7", "#297373", "#FF8552", "#A40E4C"]; var renderData = []; for (var i = 0; i < colors.length; i++) { renderData.push(); } ``` In this snippet, we populate our `renderData` array with `Circle` components just like we originally set out to do. So far so good. To display all of these components, React makes it very simple. Take a look at the highlighted line for all you have to do: ```js ReactDOM.render(
{renderData}
, document.querySelector("#container") ); ``` In our `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 seeing something that looks like the following when you preview in your browser: ![](https://www.kirupa.com/react/images/react_array.png) Ok, I lied. There is actually one more thing we need to do, and this is a subtle one. The way React makes UI updates really fast is 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 are 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: ```js for (var i = 0; i < colors.length; i++) { var color = colors[i]; renderData.push(); } ``` 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/components and don't specify a `key` prop on them, you will be greeted with the following warning in your console: Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using
. When you are working with React, it is a good idea to periodically check your console for any messages it may have. Even if things seem to be working just fine, you'll never know what you might find :P ## Conclusion All the tips and tricks you've seen in this article are made possibly because of one thing: **JSX is JavaScript**. This is what allows you to have your JSX live wherever JavaScript thrives. To us, it looks like we are doing something absolutely bizarre when we specify something like this: ```js for (var i = 0; i < colors.length; i++) { var color = colors[i]; renderData.push(); } ``` Even though we are 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: ```js for (var i = 0; i < colors.length; i++) { var color = colors[i]; renderData.push(React.createElement(Circle, { key: i + color, bgColor: color })); } ``` When our JSX gets converted into pure JS, everything makes sense again. This is what allows us to get away with putting our JSX in all sorts of uncomfortable (yet photogenic!) situations with our data and still get the end result we want! Because, in the end, it's all just JavaScript. **Next tutorial:** [The React Component Lifecycle](https://www.kirupa.com/react/component_lifecycle.htm)