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?

map is just a function. If it doesn't return you anything, you cannot have any value to operate on. It's generic behaviour of map — Bikas, Dec 08 '16 at 12:30
Look at the braces in your arrow functions. `foo => bar` or `foo => ( bar )`: implicit return, `foo => { bar }` needs explicit return. — pawel, Dec 09 '16 at 10:19
@Bikas Thank you for that. I cannot tell you how long I was facing a lack of the views inside map() displaying. Your short statement brought me to a face palm moment, but it all works now. — Alec Bennett, Nov 18 '17 at 01:21

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

score 2 · Answer 2 · answered Dec 08 '16 at 12:39

2

Directly return the Component in the anonymous function inside map

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

or

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

answered Dec 08 '16 at 12:39

scazzy

950
2
8
20

score 0 · Answer 3 · answered Dec 08 '16 at 13:04

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]

score 0 · Answer 4 · answered Dec 08 '16 at 13:05

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!

score 0 · Answer 5 · answered Dec 08 '16 at 16:09

0

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

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

answered Dec 08 '16 at 16:09

Matt Aft

8,742
3
24
37

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

5 Answers5