React.Children.map vs children.map, what's the difference?

Question

In React v16.2.0, there is a new API call React.Children.

I am curious what's the different between React.Children and use children directly.

For example, if I want to manipulate the children content, I can do the trick in both methods. example

const Child = () => (
  <div>child</div>
)

class App extends React.Component {
  render() {
    const template1 = React.Children.map(this.props.children, (child) => {
      return React.cloneElement(child);
    });

    const template2 = this.props.children.map((child) => {
      return React.cloneElement(child);
    });
    return [template1, template2];
  }
}

And the result is the same.

Does anyone know what is the different?

Or what is the purpose for React team to release this API?

score 17 · Answer 1 · answered Apr 21 '19 at 20:24

The children of React component is a node which might be undefined or null. React.Children.map is a utility function to help you handle different cases.

React.Children.map

Invokes a function on every immediate child contained within children with this set to thisArg. If children is an array it will be traversed and the function will be called for each child in the array. If children is null or undefined, this method will return null or undefined rather than an array.

You should always use React.Children.map to traverse children in your app. Use children.map throws an error when children is not an array.

score 9 · Answer 2 · edited Jan 14 '23 at 09:03

9

Please take a look at this example to see the different

Paste this to console browser:

var children = null
chidren.map(i => {return i}) // => VM370:1 Uncaught TypeError: Cannot read property 'map' of null
React.Children.map(children, i => {return i;}) // return null

Here is the result:

result

So React.Children.map will handle the case when children is null or undefined

edited Jan 14 '23 at 09:03

Cristik

30,989
25
91
127

answered Jun 10 '19 at 11:07

Khanh Pham

101
1
4

1

Thanks for posting an answer. However please don't post a link to other pages. Show the difference in your own post, and give the explanation there – N8888 Jun 10 '19 at 11:11
2

it's image not other pages, I cannot post inline image due to not enough contribute point. – Khanh Pham Jun 10 '19 at 11:17

score 7 · Accepted Answer · answered Mar 15 '18 at 04:59

To the best of my knowledge, for your operations there is no real difference. However, React.Children provides utilities for dealing with this.props.children. For the use of map there was one comment in the documentation that I thought might be interesting:

If children is a keyed fragment or array it will be traversed

So their implementation seems to be doing a little more than if your just used Array.prototype.map.

You can read on what other functionality React.Children provides, but it largely seems like they are providing convenience functions so you don't have to worry about traversing children who may have children and so on.

Your answer seems to be outdated now, it says "If children is a Fragment it will be treated as a single child and not traversed." — Karamell, Apr 06 '20 at 07:39

React.Children.map vs children.map, what's the difference?

3 Answers3

Linked