title: React Native returning multiple JSX components in loop using another function
body: <p>I would like to return multiple JSX components (<code>Foodcards</code>) using a loop. I used another function to return the component inside the loop. But the function is not returning the component. Foodcards is a component that takes name and rate as inputs. The code works fine when the component(<code>Foodcards</code>) is returned from <code>renderMenu()</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import Dimensions from 'Dimensions'
  import { Actions, ActionConst } from 'react-native-router-flux'
  import * as firebase from 'firebase'
  
  
  import GLOBALS from '../global/Globals';
  import Background from '../Background.js';
  import Foodcards from '../Foodcards.js';
  
  const DEVICE_WIDTH = Dimensions.get('window').width;
  
  import {
      StyleSheet,
      View,
      Text,
      TouchableOpacity,
      ScrollView,
      TextInput,
      ToastAndroid,
  } from 'react-native'
  
  export default class Foodview extends Component {
  
      returnFoodCard(text1, text2) {
          return &lt;Foodcards Name={text1} Rate={text2} /&gt;
      }
  
      renderMenu() {
          var fetchedJSON = this.props.dishes;
          var fetchedString = JSON.stringify(fetchedJSON);
          var i = 0;
          var arrayOfLines = fetchedString.split(",")
          for (i = 0; i &lt; arrayOfLines.length; i++) {
              var arr = arrayOfLines[i].split('$');
              ToastAndroid.show(arr[1], ToastAndroid.SHORT);
              this.returnFoodCard(this, arr[1], arr[2]);
          }
      }    
  
      render() {
  
          return (
  
  
              &lt;View style={styles.Container}&gt;
  
                  {this.renderMenu()}
  
              &lt;/View&gt;
  
  
  
          );
      }
  }
  
  
  const styles = StyleSheet.create({
  
      Container: {
          top: 5,
          flex: 1,
          backgroundColor: "white",
      },
  
      btnStyle: {
          backgroundColor: GLOBALS.linkTextColor,
          alignItems: 'center',
          top: 400,
          left: DEVICE_WIDTH / 2 - ((DEVICE_WIDTH - 250) / 2),
          paddingLeft: 8,
          width: DEVICE_WIDTH - 250,
          height: 30,
      },
  
      btnText: {
          left: -5,
          top: 5,
          color: "white"
      },
  
  });</code></pre>
  </div>
  </div>
  </p>