title: React Native passing array between components
body: <p>I am trying to pass an array of numbers from one child component to another. I believe the way to do this is through their parent file.</p>
  
  <p>First child- generateButton simply generates an array of 3 random numbers onPress</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    TouchableHighlight,
    Text,
    View
   } from 'react-native';
  import styles from '../styles/styles';
  
  
  var GenerateButton = React.createClass({
  
    generateRandoms: function() {
      let randomNumbers = [Math.random(), Math.random(), Math.random()];
      this.props.onPress(randomNumbers);
    },
  
    render: function (){
      return (
          &lt;TouchableHighlight 
          onPress={this.generateRandoms} 
          style={styles.generateButton}&gt;
              &lt;Text style={styles.generateButton}&gt;Generate!&lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
      );
    }
  });
  
  module.exports = GenerateButton; 
  </code></pre>
  
  <p>Parent- main uses this to change the value of the state randomGenres to the value returned by generateButton, this state is then passed to the 2nd child Genre</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View
  } from 'react-native';
  import {
  Genre
  } from './genreSelector';
  import GenerateButton from './generateButton';
  import styles from '../styles/styles';
  
  var Main = React.createClass ({
  
    propTypes: {
      randomGenres: React.PropTypes.array, 
      newRandoms: React.PropTypes.array
    },
  
    getInitialState: function () {
      return { randomGenres: [4,7,19]};
    },
  
    changeRandoms: function (newRandoms) {
      this.setState({
          randomGenres: newRandoms
      });
    },
  
    render (){
      return (
     &lt;View style={styles.container}&gt;
      &lt;Text style= {styles.title}&gt;Genre Generator&lt;/Text&gt;
      &lt;Text style={styles.h2}&gt;I am listening to&lt;/Text&gt;
      &lt;View style={styles.genreContainer}&gt;
          &lt;Genre randomGenres={this.state.randomGenres}/&gt; 
      &lt;/View&gt;
      &lt;Text style={styles.h2}&gt;You filthy casual&lt;/Text&gt;
      &lt;GenerateButton onPress={this.changeRandoms}/&gt;
  
     &lt;/View&gt;
      );
  }
  });
  
  module.exports = Main;
  </code></pre>
  
  <p>Second child- Genre, at this point all i want it to do is receive randomGenres as a prop and render the three values</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View
  } from 'react-native';
  import{
      genre1,
      genre2,
      genre3
  } from './genres.js';
  import styles from '../styles/styles';
  
  var Genre = React.createClass({
  
     render: function (){
      var randomGenres = this.props.randomGenres;
  
      return (
          &lt;View styles={styles.genreContainer}&gt;
              &lt;Text &gt;{randomGenres[0]}&lt;/Text&gt;
              &lt;Text &gt;{randomGenres[1]}&lt;/Text&gt;
              &lt;Text &gt;{randomGenres[2]}&lt;/Text&gt;
          &lt;/View&gt;
          );
      }
  });
  
  module.exports = Genre;
  </code></pre>
  
  <p>Eventually it will convert the random numbers into random genres by finding a random element of an array of genres and displaying them instead of just the numbers. However i cannot seem to pass the array between the components</p>
  
  <p><strong>My Error</strong>: Element type is invalid: expected a string or a class/function, check the render method of main</p>
  
  <p><strong>This only occurs when this line is uncommented:</strong></p>
  
  <p><code>&lt;Genre randomGenres={this.state.randomGenres}/&gt;</code> </p>
  
  <p><strong>I believe my error lies in how Genre receives the array stored in randomGenres</strong></p>
  
  <p>I have tried to set the data type of the prop using propTypes but no luck, any help would be greatly appreciated!</p>