One Solution

Hi, how'd it go? 0:00 Were you able to create and render the planet card using React? 0:01 If not, that's all right. 0:05 You can watch my solution, compare it to what you wrote and 0:06 then try to recreate it yourself. 0:09 The goal was to use the data in the planets array to display each of the eight 0:11 planet cards. 0:16 Now I'll show you my solution. 0:17 You can also reference my code when you download the product files in app.js. 0:19 I'll start by creating a stateless functional component 0:23 named planet with const Planet = an arrow function. 0:28 Inside the function, 0:33 add the return keyword followed by a set of parenthesis to wrap the jsx. 0:34 The function returns the markup for a planet card, so 0:39 I'll copy the div with a class card from the example template in 0:43 index.html, and paste it inside the parentheses. 0:48 Remember, in React you use the attribute className instead of class. 0:52 So I'll change the div's class attribute to className. 0:58 Next, right below, 1:02 I'll create the container component as a function named PlanetList. 1:04 I'll add the return statement, and 1:13 inside the parenthesis add a div with the class container. 1:16 This component is going to return a list of planet components. 1:23 So I'll display the planet component inside the container using a planet tag. 1:27 Then to render the planet list to the dom, I'll use the ReactDOM.render method. 1:34 I'll pass it PlanetList as the component to render. 1:44 Then use document.getElementById to specify the div with the id 1:49 root as the element to which I want to render, or mount the PlanetList. 1:55 So now to get the planet's data into our components, 2:01 I'll need to pass the planet's array as props to PlanetList. 2:05 So in ReactDOM.render I'll add a prop named planets to the PlanetList tag, 2:10 then pass it the planets array by writing the variable planets between curly braces. 2:16 All right, this data is now available to the PlanetList component as props. 2:24 Next, to use this prop inside the PlanetList function, 2:30 we need to pass it the parameter for props. 2:33 Then to display each planet card, 2:36 I'll use the map array iteration method to iterate over the planet's array and 2:39 render a planet component for each object in the array. 2:44 JavaScript expressions written inside JSX need to be placed inside curly braces, 2:48 so inside the container div add a set of curly braces. 2:53 And inside the curly braces map over the planet data 2:56 coming in from props with props.planets.map. 3:01 I'll write the map callback as an error function that takes the parameter 3:06 planet to represent the current item being processed in the array. 3:11 Then I'll move the planet tag inside the callback. 3:16 Now I'll need to pass the necessary props down to the Planet component 3:21 using the properties from each planet item we're getting from map. 3:26 First add a name prop and set it equal to planet.name. 3:30 Next add a prop named diameter and 3:38 set it to planet.diameter. 3:42 Below that add a prop named moons and 3:46 pass it planet.moons. 3:50 And the prop name desc for description, and set to planet.desc. 3:54 And finally a prop name url and passed planet.url. 4:01 And let's not forget to specify a key prop on each Planet component. 4:07 That way React can keep track of it and 4:12 differentiate each component from its sibling. 4:14 I can provide a unique key to each planet component using the ID 4:17 property of each object. 4:21 So I'll pass planet, a key prop, and 4:23 as the value pass it an ID with planet.id. 4:27 Finally, I'll replace the static content in the Planet 4:31 component with the dynamic data from props. 4:35 First, I'll pass the Planet function, the props parameter, 4:38 to enabled the use of props, then replace the attribute values and most 4:43 of the text content with JSX expressions that call their respective props. 4:47 First, the image elements source attribute should 4:52 be an expression that returns props.url. 4:57 I'll set the alt text to the planet name with props.name. 5:01 Then replace the text in the h2 with curly braces and 5:09 props.name, and the description text 5:16 with have curly braces and props.desc. 5:20 In the unordered list replace the diameter number with props.diameter. 5:29 And finally, display the number of moons with props.moons. 5:38 All right, let's have a look in the browser. 5:46 Refresh the page, and there you have it, our eight planet cards. 5:49 Now, you could have done things a little differently and that's okay. 5:55 For instance, you might have created the main app component as a class then 5:58 iterated over this.props.planets, for example, to display each planet card. 6:03 Or maybe you also created the Planet component as a class, too. 6:09 One shortcut you could have used to pass each prop down to the Planet 6:13 component all at once is passing a spread attribute to Planet. 6:18 For example, add a set of curly braces to the Planet tag, and 6:22 inside the curly braces pass the spread operator with ..., followed by planet. 6:27 Now I can delete all but the key prop from the Planet tag. 6:34 This way you don't have to explicitly list each prop name and 6:39 value using the spread operator. 6:43 You're still able to access each prop by its name in the Planet component, 6:45 with props.url, props.name, and so on. 6:51 All right, 6:54 I hope that you were able to complete this React practice session successfully. 6:55 If not, why not start over and 6:59 try to write it again without looking at my version? 7:01 You're also going to learn a whole lot more about working with React as you 7:03 progress through our React curriculum. 7:07 Thanks, everyone, and happy learning. 7:09