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 did it go?
0:00
Were you able to create and
render the planet cards using React?
0:02
Don't worry if you're not there yet, in
case you're stuck, I'm here to guide you.
0:06
We'll go over my solution, compare it
with what you've come up with, and
0:12
then I encourage you to
give it another shot.
0:16
The objective was to take the data
stored in the planets array and
0:20
use it to display each of
the eight planet cards.
0:24
Now I'll show you my approach.
0:28
You can also reference my code when
you download the project files.
0:30
To kick things off, in the main.jsx file,
I'm going to create a component
0:35
called planet with const Planet
equals an arrow function.
0:41
Inside the function add
the return keyword followed by
0:49
a set of parentheses to wrap the JSX.
0:53
The function returns the markup for
a planet card.
0:57
I'll copy the div with a class
card from the example template
1:00
in index.html and
paste it inside the parentheses.
1:05
Let's start by addressing
the error in our code.
1:11
If you hover over the image tag,
the error states that JSX
1:15
element image has no
corresponding closing tag.
1:20
In HTML, it's acceptable for
the image tag not to have a closing tag.
1:24
But rule 2 of JSX is that
all tags must be closed.
1:30
To fix this, I'll modify the image
tag to be self closing by adding
1:36
a forward slash at the end.
1:40
Remember, in React, the attribute
class name is used instead of class.
1:44
So I'll change the div's
class attribute to className.
1:49
Next, I'll create the container component
as a function named PlanetList.
1:54
I'll add the return statement and
inside the parentheses,
2:01
add a div with the class container.
2:06
This component is going to return
a list of planet components.
2:10
So I'll display the planet component
inside the container using a planet tag.
2:14
To render the planet list onto the DOM,
I'll utilize the create root method.
2:20
At the top of the file, I'll import
create root with import curly braces,
2:27
createRoot from react-dom/client.
2:34
Now at the bottom of the file,
I'll define a constant called root,
2:39
assigning it the value of createRoute.
2:44
I'll use document.getElementById
to specify the div with
2:47
the ID of root as the element to which I
want to render or mount the planet list.
2:52
I'll then call root.render to render
the planet list component onto the DOM.
3:00
Now to get the planet's
data into our component,
3:07
I'll need to pass the planet's array
as a prop to the PlanetList component.
3:11
Within the root.render method, I'll add a
prop named planet to the planet list tack,
3:16
then pass it the planet's array by writing
the variable planets between curly braces.
3:22
All right,
3:31
the data has now become accessible to
the planet list component through props.
3:31
To use this prop inside
the PlanetList function,
3:37
I'll need to pass it the parameter for
props.
3:40
To dynamically display each planet card,
I'll use the MapArray iteration method.
3:45
This approach allows us to iterate
over the planet's array and
3:51
create a planet component for
each object in the array.
3:55
When writing JavaScript
expressions within JSX,
4:00
remember to enclose them
within curly braces.
4:03
Inside the container div,
place a set of curly braces and
4:08
within those,
utilize .map to iterate over the planet
4:12
data received from props
by using props.planets.map.
4:17
I'll set up the map callback as an arrow
function that takes the planet parameter,
4:24
signifying the current item
being processed in the array.
4:29
Then I'll move the planet
tag within this callback.
4:34
Now I'll need to pass the necessary
props down to the planet component using
4:38
the properties from each planet
item we're getting from map.
4:43
First, add a name prop and
set it equal to planet.name.
4:48
Next, introduce a diameter prop,
assigning it the value of planet.diameter.
4:53
Just below that, integrate a moons
prop and pass in planet.moons.
4:59
Include a prop named desc for
description and set it to planet.desc.
5:06
Finally, implement a url prop and
pass in planet.url.
5:12
Let's not forget to specify a key
prop on each planet component.
5:19
This step enables React to keep
track of each component and
5:24
differentiate them from their siblings.
5:28
For a unique key, I suggest using
the ID property of each object,
5:31
so I'll pass planet a key prop and
set the value to planet id.
5:36
We're in the final stretch now as
I'll replace the static content
5:43
within the planet component
with a dynamic data from props.
5:48
First, make sure the planet
function takes the props parameter
5:52
granting access to the props.
5:57
Now, I'll replace the attribute values and
most of the text content
6:00
with JSX expressions that
call their respective props.
6:05
First, image elements source value should
be an expression that returns props.url.
6:10
I'll set the alt text to
the planet name with props.name.
6:17
In the h2 element, replace the text
with curly braces containing props.name.
6:22
Similarly, the description
text can be replaced with
6:30
curly braces around props.desk.
6:34
In the unordered list, replace
the diameter number with props.diameter.
6:37
Lastly, display the number
of moons with props.moons.
6:43
All right,
let's take a glimpse in the browser.
6:48
And there you have it, the eight planet
cards are now dynamically generated.
6:51
Keep in mind that there are often multiple
ways to approach the same challenge.
6:57
So, your individual approach might
differ and that's absolutely fine.
7:02
As a nifty shortcut, you could have used
7:08
the spread operator to pass all props
down to the planet component at once.
7:10
For instance, add a set of
curly braces to the planet tag.
7:16
And within those,
pass the spread operator,
7:21
indicated by the three dots,
followed by planet.
7:24
Now I can delete all but
7:29
the key prop from the planet tag
through the use of the spread operator.
7:31
There's no need to explicitly
list each prop's name and value.
7:36
You can continue to access
each prop by its name,
7:42
within the planning component using
props.url, props.name, and so forth.
7:45
All right,
7:51
I hope that you are able to complete this
React practice session successfully.
7:52
If not, why not start over and
7:57
try to write it again without
looking at my version.
7:59
You're also going to learn a whole lot
more about working with React as you
8:03
progress through our React curriculum.
8:07
Thanks everyone and happy learning!
8:10
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