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