0

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.

KinectDeveloper23
  • 17
  • 1
  • 5
  • Can you log out `this.props.randomStore.randomNumbers` in your GenreSelector? Granted, I'm not very familiar with MobX, but if I were debugging your solution, that's the first place I'd look. – Zany Cadence Nov 09 '16 at 15:56
  • I cant unfortunately, taking out the `var` and `get` solved those `Unexpected token` errors but then `console.log` isnt recognised and doesnt highlight blue in sublime so I get another error on the `.` I have tried putting both `chosenrandom` and `randomGenres` inside the render function and that helps, i will update my `GenreSelector` but now i get an `Unexpected token` at the end of `randomGenres` – KinectDeveloper23 Nov 09 '16 at 16:06
  • I didn't see the `console.log(chosenrandom)` after you declare `chosenrandom`. Does this log statement work? Again, not very familiar with MobX, mainly use redux for state but I would always check that the props were being passed properly in the constructor if I was in your situation. Not sure why you're using `this.chosenrandom[]` either, chosenrandom is declared in this scope, shouldn't have to use `this` – Zany Cadence Nov 09 '16 at 16:24
  • I still get an error code `Unexpected token, expected ,` so it doesn't actually run, so the console.log doesn't work. I have updated my original post and code in `genreSelector`. I have called `console.log(chosenrandom)` after `chosenrandom` is declared but error on the `randomGenres` line is persistant and preventing app from running – KinectDeveloper23 Nov 09 '16 at 17:30
  • do you have a github with this code on it so I could actually see it? cause I see that your `randomGenres` declaration isn't complete in the snippet posted here. – Zany Cadence Nov 09 '16 at 20:10
  • https://github.com/Kovah101/GenreGeneratorv1 hopefully things will be clearer – KinectDeveloper23 Nov 10 '16 at 11:33
  • if this is the code you're running, you're missing the right `)` on all of the `Math.floor()` calls. If that doesn't fix it, I'll take a look later today/tomorrow and see if I can't figure it out. – Zany Cadence Nov 10 '16 at 17:12
  • Thanks Zany, i caught the missing `)` but it still wouldnt work. So i decided to put all the calculations and genre picking to the button and just send the array as a prop from the `genreButton` to the `mainOriginal` then back to `genreselector`. very similiar to a codecademy react tutorial I have done. Got it working here: https://github.com/Kovah101/GenreGeneratorv2 – KinectDeveloper23 Nov 13 '16 at 14:11

1 Answers1

0

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

KinectDeveloper23
  • 17
  • 1
  • 5