This practice will be retired on March 31, 2024.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video covers one solution to the challenge.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up