⚠️ This lesson is retired and might contain outdated information.

Understand React.Children Utilities

Joe Maddalone
InstructorJoe Maddalone
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 2 years ago

The data contained in this.props.children is not always what you might expect. React provides React.children to allow for a more consistent development experience.

[00:00] In a number of situations, you may want to iterate over the children of your components. To illustrate that, I'm going to say let items = this.props.children. I'm going to map over those. I'm going to take in a child and return the same child. We'll log out our items.

[00:22] In this case, in our parent component, which we're rendering in our app component, we have two children, each a div, one with a class name of child A, and another with a class name of child B. We're expecting those to be represented in this items variable. We do in fact see that. We've got an array with two objects representing each of children.

[00:41] However, if we remove the second child and try to rerun the same code, we're going to get an error that says, "Map is not a function of props.children." If we log out this.props.children before we call a map method, we're going to see that our children in this case is actually a single object.

[01:02] To solve that, React provides us with react.children and a number of methods that we can attach to that. Map is in fact one of them. Here we will say map. This is going to take two arguments instead of just the mapping function.

[01:19] The first argument is going to be the actual children, then the following will be a mapping function. We'll save that. Even with one child, we do get an array with a single object. In this particular case with mapping, and the fact that I'm simply returning the component, we can actually call react.children.2array, pass in our props.children. Sign out the items.

[01:48] We'll get the exact same result, with one or more children. There it is with two, and we get that right there. In addition to map and to array, we also have a standard for each, same signature. In this case, let's log something out since this won't return an array.

[02:08] We'll say child.props.classname, save that. We should see child A and child B, and we do.

[02:17] Another method that we have is react.children.only. This is going to return a single child. If it's more than one child, it will throw an error. Let's assign that to items. I'm expecting an error, which we did get, because we have more than one child. We're going to delete the second child, and now we've got a single child.

egghead
egghead
~ 2 hours ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today