1 00:00:00,315 --> 00:00:01,678 Hi, how'd it go? 2 00:00:01,678 --> 00:00:05,205 Were you able to create and render the planet card using React? 3 00:00:05,205 --> 00:00:06,609 If not, that's all right. 4 00:00:06,609 --> 00:00:09,555 You can watch my solution, compare it to what you wrote and 5 00:00:09,555 --> 00:00:11,310 then try to recreate it yourself. 6 00:00:11,310 --> 00:00:16,127 The goal was to use the data in the planets array to display each of the eight 7 00:00:16,127 --> 00:00:17,148 planet cards. 8 00:00:17,148 --> 00:00:19,052 Now I'll show you my solution. 9 00:00:19,052 --> 00:00:23,703 You can also reference my code when you download the product files in app.js. 10 00:00:23,703 --> 00:00:28,671 I'll start by creating a stateless functional component 11 00:00:28,671 --> 00:00:33,243 named planet with const Planet = an arrow function. 12 00:00:33,243 --> 00:00:34,740 Inside the function, 13 00:00:34,740 --> 00:00:39,478 add the return keyword followed by a set of parenthesis to wrap the jsx. 14 00:00:39,478 --> 00:00:43,722 The function returns the markup for a planet card, so 15 00:00:43,722 --> 00:00:48,721 I'll copy the div with a class card from the example template in 16 00:00:48,721 --> 00:00:52,989 index.html, and paste it inside the parentheses. 17 00:00:52,989 --> 00:00:58,616 Remember, in React you use the attribute className instead of class. 18 00:00:58,616 --> 00:01:02,666 So I'll change the div's class attribute to className. 19 00:01:02,666 --> 00:01:04,443 Next, right below, 20 00:01:04,443 --> 00:01:10,380 I'll create the container component as a function named PlanetList. 21 00:01:13,169 --> 00:01:16,190 I'll add the return statement, and 22 00:01:16,190 --> 00:01:21,071 inside the parenthesis add a div with the class container. 23 00:01:23,513 --> 00:01:27,631 This component is going to return a list of planet components. 24 00:01:27,631 --> 00:01:34,100 So I'll display the planet component inside the container using a planet tag. 25 00:01:34,100 --> 00:01:41,237 Then to render the planet list to the dom, I'll use the ReactDOM.render method. 26 00:01:44,848 --> 00:01:49,987 I'll pass it PlanetList as the component to render. 27 00:01:49,987 --> 00:01:55,679 Then use document.getElementById to specify the div with the id 28 00:01:55,679 --> 00:02:01,898 root as the element to which I want to render, or mount the PlanetList. 29 00:02:01,898 --> 00:02:05,735 So now to get the planet's data into our components, 30 00:02:05,735 --> 00:02:10,263 I'll need to pass the planet's array as props to PlanetList. 31 00:02:10,263 --> 00:02:16,801 So in ReactDOM.render I'll add a prop named planets to the PlanetList tag, 32 00:02:16,801 --> 00:02:24,055 then pass it the planets array by writing the variable planets between curly braces. 33 00:02:24,055 --> 00:02:30,004 All right, this data is now available to the PlanetList component as props. 34 00:02:30,004 --> 00:02:33,953 Next, to use this prop inside the PlanetList function, 35 00:02:33,953 --> 00:02:36,924 we need to pass it the parameter for props. 36 00:02:36,924 --> 00:02:39,193 Then to display each planet card, 37 00:02:39,193 --> 00:02:44,438 I'll use the map array iteration method to iterate over the planet's array and 38 00:02:44,438 --> 00:02:48,129 render a planet component for each object in the array. 39 00:02:48,129 --> 00:02:53,390 JavaScript expressions written inside JSX need to be placed inside curly braces, 40 00:02:53,390 --> 00:02:56,785 so inside the container div add a set of curly braces. 41 00:02:56,785 --> 00:03:01,701 And inside the curly braces map over the planet data 42 00:03:01,701 --> 00:03:06,509 coming in from props with props.planets.map. 43 00:03:06,509 --> 00:03:11,469 I'll write the map callback as an error function that takes the parameter 44 00:03:11,469 --> 00:03:16,037 planet to represent the current item being processed in the array. 45 00:03:16,037 --> 00:03:21,242 Then I'll move the planet tag inside the callback. 46 00:03:21,242 --> 00:03:26,139 Now I'll need to pass the necessary props down to the Planet component 47 00:03:26,139 --> 00:03:30,955 using the properties from each planet item we're getting from map. 48 00:03:30,955 --> 00:03:38,296 First add a name prop and set it equal to planet.name. 49 00:03:38,296 --> 00:03:42,389 Next add a prop named diameter and 50 00:03:42,389 --> 00:03:46,048 set it to planet.diameter. 51 00:03:46,048 --> 00:03:50,980 Below that add a prop named moons and 52 00:03:50,980 --> 00:03:54,440 pass it planet.moons. 53 00:03:54,440 --> 00:04:01,998 And the prop name desc for description, and set to planet.desc. 54 00:04:01,998 --> 00:04:07,511 And finally a prop name url and passed planet.url. 55 00:04:07,511 --> 00:04:12,205 And let's not forget to specify a key prop on each Planet component. 56 00:04:12,205 --> 00:04:14,362 That way React can keep track of it and 57 00:04:14,362 --> 00:04:17,296 differentiate each component from its sibling. 58 00:04:17,296 --> 00:04:21,723 I can provide a unique key to each planet component using the ID 59 00:04:21,723 --> 00:04:23,605 property of each object. 60 00:04:23,605 --> 00:04:27,239 So I'll pass planet, a key prop, and 61 00:04:27,239 --> 00:04:31,336 as the value pass it an ID with planet.id. 62 00:04:31,336 --> 00:04:35,529 Finally, I'll replace the static content in the Planet 63 00:04:35,529 --> 00:04:38,860 component with the dynamic data from props. 64 00:04:38,860 --> 00:04:43,042 First, I'll pass the Planet function, the props parameter, 65 00:04:43,042 --> 00:04:47,688 to enabled the use of props, then replace the attribute values and most 66 00:04:47,688 --> 00:04:52,661 of the text content with JSX expressions that call their respective props. 67 00:04:52,661 --> 00:04:57,579 First, the image elements source attribute should 68 00:04:57,579 --> 00:05:01,720 be an expression that returns props.url. 69 00:05:01,720 --> 00:05:09,786 I'll set the alt text to the planet name with props.name. 70 00:05:09,786 --> 00:05:16,010 Then replace the text in the h2 with curly braces and 71 00:05:16,010 --> 00:05:20,821 props.name, and the description text 72 00:05:20,821 --> 00:05:25,786 with have curly braces and props.desc. 73 00:05:29,375 --> 00:05:35,306 In the unordered list replace the diameter number with props.diameter. 74 00:05:38,253 --> 00:05:42,324 And finally, display the number of moons with props.moons. 75 00:05:46,450 --> 00:05:49,238 All right, let's have a look in the browser. 76 00:05:49,238 --> 00:05:55,731 Refresh the page, and there you have it, our eight planet cards. 77 00:05:55,731 --> 00:05:58,991 Now, you could have done things a little differently and that's okay. 78 00:05:58,991 --> 00:06:03,905 For instance, you might have created the main app component as a class then 79 00:06:03,905 --> 00:06:09,443 iterated over this.props.planets, for example, to display each planet card. 80 00:06:09,443 --> 00:06:13,413 Or maybe you also created the Planet component as a class, too. 81 00:06:13,413 --> 00:06:18,033 One shortcut you could have used to pass each prop down to the Planet 82 00:06:18,033 --> 00:06:22,422 component all at once is passing a spread attribute to Planet. 83 00:06:22,422 --> 00:06:27,270 For example, add a set of curly braces to the Planet tag, and 84 00:06:27,270 --> 00:06:34,033 inside the curly braces pass the spread operator with ..., followed by planet. 85 00:06:34,033 --> 00:06:39,987 Now I can delete all but the key prop from the Planet tag. 86 00:06:39,987 --> 00:06:43,724 This way you don't have to explicitly list each prop name and 87 00:06:43,724 --> 00:06:45,858 value using the spread operator. 88 00:06:45,858 --> 00:06:51,481 You're still able to access each prop by its name in the Planet component, 89 00:06:51,481 --> 00:06:54,886 with props.url, props.name, and so on. 90 00:06:54,886 --> 00:06:55,473 All right, 91 00:06:55,473 --> 00:06:59,485 I hope that you were able to complete this React practice session successfully. 92 00:06:59,485 --> 00:07:01,020 If not, why not start over and 93 00:07:01,020 --> 00:07:03,729 try to write it again without looking at my version? 94 00:07:03,729 --> 00:07:07,325 You're also going to learn a whole lot more about working with React as you 95 00:07:07,325 --> 00:07:09,368 progress through our React curriculum. 96 00:07:09,368 --> 00:07:11,337 Thanks, everyone, and happy learning.