Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice React Component Rendering!
You have completed Practice React Component Rendering!
Preview
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