Went for my first hackathon!! :D
Tags: reactnative, react, javascript, hackathon
Published: 2018-07-29 10:49:17

---
title: Went for my first hackathon!! :D
published: true
description: 
tags: react native, react, javascript, hackathon
---

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](https://stackoverflow.com/questions/44636886/react-native-how-to-pass-props-navigating-from-one-screen-to-another)

**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](https://stackoverflow.com/questions/24806772/how-to-skip-over-an-element-in-map) 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](https://stackoverflow.com/questions/1098040/checking-if-a-key-exists-in-a-javascript-object)

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)](https://davidwalsh.name/array-sort)

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](https://stackoverflow.com/questions/953071/how-to-easily-truncate-an-array-with-javascript)

- **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!