GUYS!! I'm feeling so happy right now, I just spent 1.5 days putting something together. It's nothing too impressive (basically just a react-native application where user fills in some information, then the information is compared to other users' informations, and returns appropriate matches based on a scoring formula). I'm kinda rusty on React atm when the last time I've touched it was 1 year ago and tons of things have changed since then!

STILL. I'm really so happy because I haven't been coding a lot (have been busy with user interviews!). This was one of the few days that I really could spend 12h a day coding (miss those days man), and made me realise that wholeheartedly investing my time on a side project can allow me to learn so much in a short span of time. Although without a hackathon i feel less motivated to do so :(

Anyway, here's the basic stuff I've learnt/refreshed from my memory, from building my tiny little application.

• this.setState is executed asynchronous, need to use a update arrow function in order to actually setState properly https://reactjs.org/docs/faq-state.html

    handleSubmit = () => {
        const value = this._form.getValue(); // use that ref to get the form value

        this.setState((prevState) => {
            return {mentor: value}
        });

        console.log('state', this.state);

      }

• Setting params on one screen and passing to next screen: javascript - React Native: How to pass props navigating from one screen to another - Stack Overflow

From previous screen:

this.props.navigation.navigate('Results', {mentor: this.state.mentor});

Store the object within local state of the screen first.

From next screen:
In render method:
this.props.navigation.state.params

• Import JSON from a local file

import menteesData from '../data/mentee_data.json';

I didn't know it was that easy lol.

• for functional methods javascript - How to skip over an element in .map()? - Stack Overflow remember to return element within the callback, and outside the callback as well for the array result from the functional method

    filterByTiming = (mentor, mentees) => {
        let matches = mentees.filter(mentee => {
            console.log('*** mapped mentor ***', mentor);
            console.log('*** mapped mentee timing ***', mentee.timing);

            if (mentor.timing == mentee.timing) {
                console.log('matches currently: ', matches);
                return mentee;
            } else {
                return false; //skip
            }

        }).map(mentee => {return mentee; });

        console.log('matches : ', matches);
        return matches;
    }

• Checking if a key exists in a Javascript object arrays - Checking if a key exists in a JavaScript object? - Stack Overflow

You should instead use the in operator:

"key" in obj // true, regardless of the actual value

• Sort an array of objects by property using the sort function Sort an Array of Objects by Property Using sort(fn)

Sort comparator function!

    // returns a sorted list, from highest score to lowest score
    sortByScore = (arr) => {
    arr.sort(function(obj1, obj2) {
        return obj2.score - obj1.score;
    });
    return arr;
    }

• Interestingly, other than using slice (which reads array) and splice (which mutates array), i can also use .length to truncate an array?! jquery - How to easily truncate an array with JavaScript? - Stack Overflow

• When to use this keyword vs no this? When I load some params from the previous screen, and store it in a variable inside the render method, then I don’t need to use the this keyword? Using this gives me an error. Hmm this i need to read up more about!

• Useful tutorials: https://medium.com/react-native-development/easily-build-forms-in-react-native-9006fcd2a73b for forms!