React Native passing array between components - arrays

Question

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.
First child- generateButton simply generates an array of 3 random numbers onPress
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 (
<TouchableHighlight
onPress={this.generateRandoms}
style={styles.generateButton}>
<Text style={styles.generateButton}>Generate!</Text>
</TouchableHighlight>
);
}
});
module.exports = GenerateButton;
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
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 (
<View style={styles.container}>
<Text style= {styles.title}>Genre Generator</Text>
<Text style={styles.h2}>I am listening to</Text>
<View style={styles.genreContainer}>
<Genre randomGenres={this.state.randomGenres}/>
</View>
<Text style={styles.h2}>You filthy casual</Text>
<GenerateButton onPress={this.changeRandoms}/>
</View>
);
}
});
module.exports = Main;
Second child- Genre, at this point all i want it to do is receive randomGenres as a prop and render the three values
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 (
<View styles={styles.genreContainer}>
<Text >{randomGenres[0]}</Text>
<Text >{randomGenres[1]}</Text>
<Text >{randomGenres[2]}</Text>
</View>
);
}
});
module.exports = Genre;
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
My Error: Element type is invalid: expected a string or a class/function, check the render method of main
This only occurs when this line is uncommented:
<Genre randomGenres={this.state.randomGenres}/>
I believe my error lies in how Genre receives the array stored in randomGenres
I have tried to set the data type of the prop using propTypes but no luck, any help would be greatly appreciated!

Answer 1

EDIT:
Within the render method of your Genre component you use the attribute styles instead of style Removing it should fix
your error:
import React, { Component } from 'react';
...
var Genre = React.createClass({
render: function (){
var randomGenres = this.props.randomGenres;
return (
<View style={styles.genreContainer}>
...
</View>
);
}
});
module.exports = Genre;
As NiFi's comment below details: the setState method accepts a callback as an optional second argument which is triggered once setState has completed. Grabbing the randomNumbers value here should yield the correct result