Export and import observable MobX React Native - arrays

Question

I am new to React Native and very new to MobX, only realising i needed it when my first project demanded dynamically updating and changing props/store between files.
Here is the github of the project: https://github.com/Kovah101/GenreGeneratorv1
I am trying to build an app that generates the name of random genre of music.
My main file renders all the components and has a small console.log to check that random numbers are being generated. I don't get any errors here
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import
GenreSelector
from './genreSelector';
import GenerateButton from './generateButton';
import styles from '../styles/styles';
import randomStore from './generateButton';
var MainOriginal = React.createClass ({
getInitialState() {
return {
chosenRandoms: [ , , ],
};
},
//used to check Generate button is working
changeRandoms(newRandoms) {
this.chosenRandoms = newRandoms;
console.log('the console log works!');
console.log(this.state.chosenRandoms);
} ,
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}>
<GenreSelector store={randomStore}/> {//passing randomStore as a prop to selector
}
</View>
<Text style={styles.h2}>You filthy casual</Text>
<GenerateButton onPress={this.changeRandoms}/>
</View>
);
}
});
module.exports = MainOriginal;
Next, GenerateButton renders a button with an onClickevent that generates an array of random numbers, these get checked by mainOriginaland work correctly. I also use MobX to make randomNumbers observable as it is constantly updated and will be passed to the final file genreSelector.
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TouchableHighlight,
Text,
View
} from 'react-native';
import styles from '../styles/styles';
import {observable} from 'mobx';
var GenerateButton = React.createClass({
generateRandoms: function() {
#observable 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>
);
}
});
const randomStore = new GenerateButton ();
export default randomStore;
module.exports = GenerateButton;
genreSelector should use the array of random numbers map them to the size of the 3 different genre arrays, then render 3 boxes, each with one of the random genres from each array. However I get unexpected tokens at 'chosenRandoms' if i set it to be a 'var' and the same again at 'get randomGenres`, my understanding is they need to be something.
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';
import {observer, computed} from 'mobx-react/native';
import randomStore from './generateButton';
const size = [genre1.length, genre2.length, genre3.length];
#observer
class GenreSelector extends Component {
render() {
var chosenrandom = this.props.randomStore.randomNumbers; //accessing the passed state
console.log({chosenrandom});
let randomGenres = [Math.floor(this.chosenrandom[0] * size[0], Math.floor(this.chosenrandom[1] * size[1], Math.floor(this.chosenrandom[2] * size[2]],
//manipulating the passed array -- ERROR AT END OF THIS LINE
return (
<View style={styles.genreContainer}>
<Text style={styles.genreText} >{genre1[randomGenres[0]]}</Text>
<Text style={styles.genreText} >{genre2[randomGenres[1]]}</Text>
<Text style={styles.genreText} >{genre3[randomGenres[2]]}</Text>
</View>
);
}
}
module.exports = GenreSelector;
Does anybody have any ideas on what i'm doing wrong? If i take the var and get out then i get an error at the end of the math manipulation line. I must be misusing something. Thanks for any help, I can provide more of my code but i dont think the problem is in the stylesheet or index.

Answer 1

So i decided to put all the calculations and genre picking to the generatebuttonand just send the array as a prop from the button to the mainOriginal then back to genreselector.
Didn't have to use MobX or anything overly complicated.
Here is the final code: github.com/Kovah101/GenreGeneratorv2