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

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.

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

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.