react-native: Component doesn't render in .map

Question

Something doesn't seem right here. it doesn't render the Animated.View without using return , while I've seen this work in many examples. Any guesses why this behaviour?

Answer 1

I know there's been several answers already, but I believe they fail to address OP specific question of why it is doesn't work, especially given the new ES6 syntax.

tl;dr: ES6 arrow functions with block bodies do not implicity return.

From the docs:

Arrow functions can have either a "concise body" or the usual "block body".

In a concise body, only an expression is needed, and an implicit return is attached. In a block body, you must use an explicit return statement.

This is an example of "concise body", using the filter prototype:

let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let filteredArray = myArray.filter(item => item > 5);
console.log(filteredArray);
// => [6, 7, 8, 9, 10] 

In this expression, the lack of brackets { } mean that it will implicitly return the result of the expression.

The "block body" equivalent would be:

let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let filteredArray = myArray.filter(item => {
  return item > 5;
});
console.log(filteredArray);
// => [6, 7, 8, 9, 10] 

In your post, you are specifying your component inside the block body without returning it, and since the map prototype requires that you return the item inside the callback that will be used for the new map, the map is empty.

Answer 2

Directly return the Component in the anonymous function inside map

.map((d, i) => (<Component />))

or

.map((d, i) => <Component />)

Answer 3

See MDN docs :

The map() method creates a new array with the results of calling a provided function on every element in this array.

If the provided function doesn't return any data..you will have an array with undefined objects in it.

[1, 2, 3].map(function(){}) // [undefined, undefined, undefined]

Answer 4

As Bikas Vaibhav said in his comment and paraphrasing Mozilla Docs : map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results.

Therefore, if you do not return anything, you will have an array the same length as your ballArray only with undefined instead of a returned value. Try these two examples in your browser console.

With return:

> b = [1,4,9];
> d = b.map(function(a){
    var rt = a*2;
    return rt
});
<- [2, 8, 18]

Without return:

// Without a return:
> d = b.map(function(a){
    var rt = a*2;
});
<- [undefined, undefined, undefined]

Hope this helps!

Answer 5

With ES6 arrow functions you can do implicit returns like this:

this.state.ballArray.map((d, i) => (
  <Animated.View />
))