React Native: Array.map not rendering within Scrollview

user_8100237 0
Viewed 12883

I'm trying to render a list of items within a ScrollView Component from an array of data, but for some reason the items are not showing up, or perhaps rendering at all!? From the example below, only <SomeOtherComponent /> shows up, when there should be three orange squares before it (assuming this.state.test is an array of, say, [0, 1, 2]). What am I doing wrong?

<ScrollView
  style={{flex: 1}}
  contentContainerStyle={{width: '100%', alignItems: 'center'}}>
  
  {this.state.test.map((item, index) => {
    <View style={{height: 50, width: 50, backgroundColor: 'orange', marginBottom: 10}} />
  })}
  
  <SomeOtherComponent />
</ScrollView>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

react-native reactjs arrays javascript
5 Answers

Instead of curly brackets around the map function use parenthesis instead.

with parenthesis

{this.state.test.map((item, index) => (
<View style={{height: 50, width: 50, backgroundColor: 'orange', marginBottom: 10}} />
))}

with curly brackets - adding a return inside the map function

{this.state.test.map((item, index) => {
  return (
   <View style={{height: 50, width: 50, backgroundColor: 'orange', marginBottom: 10}} 
   />
  )
})}
user_120394210

Ensure that you have imported ScrollView from react-native (not react-native-web).

Replace the following import statement,

import { ScrollView } from 'react-native-web';

with

import { ScrollView } from 'react-native';
user_71038820
Related