Let's suppose we do the following in the React's render method
componentArr = [Component1, Component2]
<div>
componentArr.map(Component => <Component />)
</div>
here, 'map' returns the following array, making the above code equivalent to
<div>
[<Component1 />, <Component2 />]
</div>
which is different from
<div>
<Component1 />
<Component2 />
</div>
However, the first approach also works and has the same result as the second one. Why is that?
componentArr.map(component => <Component />)here, 'map' returns the following array, making the above code equivalent to
<div> [<Component1 />, <Component2 />] </div>
This statement is wrong.
It is equivalent to:
<div>
{
[Component1, Component2].map(
component => {
return component;
}
}
}
</div>
So the return for map is (in between {}):
<div>
{[
<Component1 />,
<Component2 />
]}
</div>
which React treats as a component tree for rendering in between braces {}.
See Rendering list of multiple components.
It works both the way either by using map or by passing an array directly because map in javaScript return you with an array. Let's take this simple example(Try it in console).
let arr = [1,2,3,4,5,6];
console.log(arr.map(e=>e+2));
OUTPUT:- [3, 4, 5, 6, 7, 8]
Specific thing that came out of React 16, we want to look at is the ability to render multiple children using an array of components. This is a clear timesaver because it allows us to cram as many into a render instead of having to do it one-by-one.
So, it looks like this was introduced in React v16.0 as per the official documentation https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings
