FAQ: this.props - this.props.children

This community-built FAQ covers the “this.props.children” exercise from the lesson “this.props”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part I

FAQs on the exercise this.props.children

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

trying to understand line 6 of List.js [if (this.props.children instanceof Array)]-----------Section 11/13

The image i’ve attached is the closest thing i can get of an explanation to why the if statement evaluates to true so that the " 's " gets attached to pluralize if needed.

Array is not in the list for instanceof but im guessing its one of the words used to evaluate if this.props.children is an Arraythisdotpropsdotchildren

this is a link to the run down of instanceof

instanceof Examples

2 Likes

When in the code they make the JSX li elements, they don’t use the “key” attribute, yet in one of the previous lessons they suggested to do so to make sure that when rendering, the code doesn’t get confused on which items it already rendered.
Why aren’t there those keys?

1 Like

Keys are only needed if the items on the list are being updated. For example, checking off a grocery item would refresh the list and only populate the remaining items. The keys ensure the list will repopulate in the same order.

3 Likes

For the BONUS 3, what does it mean “add a second piano cat, and the second list title would automatically pluralize.” ? Thank you!

Just wanted to say thank you to the content creator (+= ‘s’) of this section, for your general hilarity, and for knowing Harvey Sid Fisher! What?? You’ve made my day. Props to you!

I am the only one that doesn’t understand a bit.

1 Like

This is typical of Codecademy!

In all these lessons we’re given instruction to just copy/paste stuff and later on the projects, they expect us to write a functional perfect program.

I think too its important to remember that even though React is a hodgepodge of HTML and JS in this instance we are dealing with your standard html list elements… keys are a property of JS objects which in this case we are not dealing with.

Though I’m sure you all have since moved on since it was a while ago.

The Bonus question pluralization is the INSTANCE OF is also a good debug tool if your wanting to check side effects in your code. Like is what is being returned to me an Object Array ?? what is it???.. and because its close to Halloween: WHAT’S IN THE BOX??? :card_file_box: that’s sort of what Instanceof does.

The return value is True or False so that’s part of the answer probably… but how it evaluates List instance ??? It would have to evaluate this.props children at two or more children to evaluate to an array worth pluralizing IDK I mean i’m glad there’s some part of an enumeration function going on in the background that I don’t have to write logic for so… Win??

I D K what this says about me but this has been bothering me all yesterday and a portion of my morning. I leaned in and did a quick read of the Cheat Sheet and this is some of something:

so everything between the tags will get returned … okay interesting…

And then I re-read the exercise’s prompts and

Big Button Energy

So as much as I want it to be the snazzy instanceof by itself: IT’S BOTH.

So all you need to do is then pair how it evaluates the children with instanceof so when its an array add and ‘S’ and when its not an array: No S needed. I mean super neat they built it that way because when you pair it with logic you can add Sweet Sweet Ss (sp?!) on things.

going to say the SSSIIITTTUATION ISS SSSSSSOLVED :snake:

1 Like

Hello.
I think that in the exercise before the instructions the platform clarifies about this topic:

If a component has more than one child between its JSX tags, then this.props.children will return those children in an array. However, if a component has only one child, then this.props.children will return the single child, not wrapped in an array.

3 Likes

Hello.
I think that in the exercise before the instructions the platform clarifies about this topic:

If a component has more than one child between its JSX tags, then this.props.children will return those children in an array. However, if a component has only one child, then this.props.children will return the single child, not wrapped in an array.

2 Likes

What is the purpose of type attribute within the List component?

If you look at List.js file, you will see the following in the List component:

let titleText = `Favorite ${this.props.type}`;

The List component expects to be passed a property named type.

The parent component class App provides the value of this property:

<List type='Living Musican'>

Suppose, in the List component we expected a prop named abc i.e. it expected to use this.props.abc, then the parent class would have the responsibility to provide a value for this property at the time of rendering the child component.

<List abc='Blah Blah'>

If you need to comment out something in JSX, you need to use curly braces and then standard JavaScript commenting.

 <List type="Living Musician">        
          <li>Sachiko M</li>
          {/* <li>Harvey Sid Fisher</li> */}
        
 </List>