06.

Button
Sungchul Lee
 Agenda
Button

In this session, we learn about 1 Button

Button

Add Num 2 Create Numlist.js with TouchableOpacity

3 App.js with functions

4 Q&A

Remove Selected item

Add Num

Button
Button
➢A basic button component that should
render nicely on any platform. Supports
a minimal level of customization.
– https://reactnative.dev/docs/button
Generator.js
➢Create new file
– Generate number
on screen
➢Create <Button>
– title: button display name
➢Props
– Add function from parent
Remove Selected item

Numer List
Numlist.js
➢Create new file
– Display new numbers
– Delete numbers
➢TouchableOpacity
– Touch event
➢Props
– Delete(idx)
• Pass value to Parent
Map()
➢The map() method creates a new array with the results of
calling a function for every array element.
➢The map() method calls the provided function once for
each element in an array, in order.
➢Note: map() does not execute the function for array
elements without values.
➢Note: this method does not change the original array.
– https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/
Global_Objects/Array/map
Array.prototype.map()
➢https://developer.mozilla.org/ko/docs
/Web/JavaScript/Reference/Global_
Objects/Array/map
delete()
➢Props
– Pass Function
– Come from Parent (App.js)
– Pass value index that is selected by onPress
App.js
App.js
➢Import components
– generator and numlist
➢State
– random array
• Hold numbers
➢onAddRandomNum
– Math.floor()
• rounds a number
– Math.random()
App.js - function https://developer.mozilla.org/ko/docs/Web/J
avaScript/Reference/Global_Objects/Array/fi
➢onNumDelete(position) lter
– Get argument from numlist
• Position: onPressed item
➢Filter()
– The filter() method creates an array filled with all array
elements that pass a test (provided as a function).
App.js - Return
➢Pass function
– Generator and NumList components
➢Pass value
– NumList
➢Three Components
➢StyleSheet
Result

Add Num

Remove Sele
cted item
Q&A