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!
Top comments (3)
Woohoo!
Congrats on the hackathon and thanks for sharing! I'm also getting the hang of React again with all the things that have changed (and be prepared for all the other things that Are going to change :p)
nice!