The way that we put together a component tree is we use one component to render another. If we have an array of data - like an array of ski days- we will use the ES5 map function to map over as many of these days that there are and return a row for each item in the array. Eve adds the spread operator as well for cleaner syntax.
- [Narrator] We've created our Ski Day List data, which we're going to render inside of that Ski Day List component, and then we're also going to create another component called the Ski Day Row. Let's create both of those new files. The first one is going to be called SkiDayRow.js, and then let's go ahead and create another one inside of components called SkiDayList. Save as SkiDayList.js.
Now, let's start with our child component first. We're going to render a Ski Day Row. Here, let's import a few things. We're going to import Terrain from react-icons/lib/md/terrain, and these are just the same icons as our previous chapters. Feel free to grab these links from there if you don't want to type them out. Import SnowFlake from react-icons/lib/ti/weather-snow, and then one more of these.
Calendar from react-icons/lib/fa/calendar. Woo, all right. We have those in there. Let's go ahead and export a stateless component called SkiDayRow. Now this is going to take in a few different properties, but let's go ahead and sub out our function first. There we go with that, and again that's going to return our JSX elements, and the properties we'll use here are resort, date, powder, and backcountry.
Now these properties should look familiar to us from the resort date, powder, and backcountry. All of these are going to be displayed inside of that SkiDayRow. Pretty cool. Let me just put this on a new line so we can now read it a little bit better. Here on line seven is where I'm going to render my JSX. We'll create a table row. Inside of the table row will be several sets of table cells.
We're going to have four different table cells, and then we'll complete these in just a second. Our four different table cells, the first is going to render the date. Let's generate this from a few different methods. We're going to say "date.getMonth," and let's inside of getMonth, also use +1 here. We're dealing with a zero based index, so we want January to be one instead of zero.
Let's also use date.getDate, and then date.getFullYear. Excellent. That's a function too. Let's make sure to use those parens. I'm also going to put this on a new line, just so that we can read that well. Our second table cell is going to display the resort. That one's a little easier. We're also going to, inside of our tds here, we're going to want to use a simple JSX expression.
To do this, we're going to use a ternary if statement, an inline if L statement, and let me show you what this looks like. The first thing we're going to use here is a set of parenthesis. Now this is where the logical test is going to be performed. What we're going to say here is if powder is true, we then want to return a SnowFlake. Otherwise, we're going to return null. If it's not a powder day, we should see nothing in that cell.
If it is a powder day, we should see the SnowFlake. Now, we can use this technique again for our backcountry day. Again, our logical test gets performed here inside of the parens, backcountry. Then we're going to use Terrain as our component, and then we'll use null. Cool. Let's go ahead and move to our SkiDayList now. The good news is we're using all of the same React icons.
Let's just copy and paste those into our SkiDayList. Let's not type those again. The other thing that we want to do here is we're going to import SkiDayRow from ./SkiDayRow. Cool. We're going to export another stateless functional component SkiDayList equals -- Now, this is a little easier to type. Days, now our days that are going to be returned are going to display data inside of that SkiDayRow.
I'll show you what that looks like in just a second. Our JSX element here is going to be Table, and inside of the Table, we're going to add a thead, so our table header, a nice semantic tag here, is going to have table row, and inside of this table row are a few ths, so thead cells. Let's add four of these.
These are going to correspond to all the cells in row that we created, date, resort, powder, and backcountry. Now is where things get really interesting. On line 16 there, we're going to create a tbody. That will house all of the body content of the table, and that's where all the rows are going to be displayed. We're going to use a technique here that's very common in React applications.
Now, what should be the properties of the SkiDayRow? Well, the first of these is going to be a key. In React, if we're ever rendering children from an array, we need to supply a key value, because that's going to help with smart rendering. Then React will know what to update. The next thing we're going to add here next to key is resort, and we're going to use day.resort. We're going to use date, which will be day.date.
We're going to use powder equals day.powder, and finally we'll use backcountry equals day.backcountry. Excellent. Let's make sure that we can see this closing tag here. For every item that is in the Days List, we're going to render a new row. This makes our data really dynamic. We will see as many different SkiDayRows as there are days.
Awesome. Let's take a look in our terminal. We'll npm start, and we should see, once we refresh, all of our days being rendered. Pretty cool. The final thing I want to do here is I want to show you a quick enhancement that we can make to this using some ES6 syntax or some very familiar syntax if you're familiar with the spread operator. What I would like to do here to make one little enhancement is instead of setting up all of these different properties, if we would just want to push all of the properties from the array into the props objects, what we can do is this.
I'm going to use this set of curly braces. I'm going to use the spread operator, the JSX spread operator, and I'm going to use Day. This is the same thing as setting up resort, powder, date, and backcountry. This is just going to take any keys that are part of that object and make them accessible by the SkiDayRow. If I give that a save, and I check it out in the browser, we see that this is now rendering appropriately. That's pretty cool, a lot less room for typos when we use this JSX spread operator.
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle
Skill Level Intermediate
Q: This course was updated on 09/19/2017. What changed?
A: The following topics were updated: setting up Chrome tools for React, inspecting React sites, Babel static transpiling with babel-cli, loading JSON with webpack, adding CSS to webpack build, and creating components with createClass(). In addition, a new video was added that covers migrating to webpack 3.