Export and import observable MobX React Native

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