MobX passing simple array from observable to observer - arrays

Question

I am new to MobX and was recommended it here.
I have a simple array which I am trying to pass to another file.
I have tried many things but I am unable to receive the array in the form of this.props.store
If you could shine some light on my improper use of mobX it would be greatly appreciated. Thank you.
import React, { Component } from 'react';
import {
Alert,
AppRegistry,
StyleSheet,
Text,
TouchableHighlight,
View
} from 'react-native';
import styles from '../styles/styles.js';
import {observable, extendObservable} from 'mobx';
//unsure why below code wont work, when trying to export it throws error: object is not a constructor (evaluating 'new rNumStore()')
// const rNumStore = observable([1,2,3]);
// a couple of other options both i am unsure why they do not work
// class rNumStore {
// extendObservable(this, {
// rNumbers: [1,2,3]});
// }
// class rNumStore {
// observable({rNumbers: [1,2,3]});
// }
//Current best working solution below
var rNumStore = function(){
extendObservable(this, {
rNumbers: [1,2,3]
});
}
var Button = React.createClass({
rNumberGen: function(){
store.rNumbers = [Math.random(), Math.random(), Math.random()];
var a = store.rNumbers[0].toString();
var d =store.rNumbers.toString();
Alert.alert(a, d);
//this alert gives mobxArray of random numbers
},
render: function(){
return(
<TouchableHighlight onPress={this.rNumberGen} style= {styles.center}>
<Text style={styles.button}>Generate!</Text>
</TouchableHighlight>
);
}
});
var store = new rNumStore;
export default store;
export {Button};
Then the second file needs to observe the array
import React, { Component } from 'react';
import {
Alert,
AppRegistry,
StyleSheet,
TouchableHighlight,
Text,
View
} from 'react-native';
import{
genre1,
genre2,
genre3
} from './genres.js';
import styles from '../styles/styles.js';
import {observer} from 'mobx-react/native';
var Genre = observer(React.createClass({
alert: function(){
//below does not cause an error.
var a = this.props.store;
//undefined ins not an object(evaluating 'this.props.store.rNumbers')
// have tried making 'a' a state : this.props.store.rNumbers same error occurs at that point
var b = this.props.store.rNumbers[1];
var c = b.toString();
Alert.alert('this is', c);
},
render: function(){
let genre = this.props.selected;
return(
<TouchableHighlight onPress={this.alert}>
<View style={styles.genre}>
<Text style={styles.center}>{genre}</Text>
</View>
</TouchableHighlight>
);
},
}));
module.exports = Genre;

Answer 1

Where is your main app code? That should create the store, then in it's render it should have and tags that you pass the store to as a property
Edit:
The main store needs a class:
class rNumStore {
rNumbers = observable([1,2,3])
rNumGen() {
this.rNumbers = [Math.random(), Math.random(), Math.random()]
//Alert.alert('this is', rNumbers.toString())
}
}
class Main extends React.Component {
render(){
return(
<View style={styles.container}>
<Text style={styles.title}>Genre Genrerator</Text>
<Text style={[styles.h2, styles.h21]}>I am listening to</Text>
<View style={styles.genreContainer}>
<Genre store={store} selected='{genre[1]}'/>
<Genre store={store} selected='{genre[2]}'/>
<Genre store={store} selected='{genre[3]}'/>
</View>
<Text style={styles.h2}>You filthy casual</Text>
<Button store={store}/>
</View>
);
}
}
var store = new rNumStore;
export default store;
module.exports = Main;
which is exported as above.
Then as Peter says the store then needs to be passed into the props of the observer classes.
Thanks for the help.