lesson-10

Author: iamshaunjp

my-project/App.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { StyleSheet, Text, View, FlatList } from 'react-native';
 import Header from './components/header';
+import TodoItem from './components/todoItem';
 
 export default function App() {
   const [todos, setTodos] = useState([
@@ -9,6 +10,11 @@ export default function App() {
     { text: 'play on the switch', key: '3' }
   ]);
 
+  const pressHandler = (key) => {
+    setTodos(prevTodos => {
+      return prevTodos.filter(todo => todo.key != key);
+    });
+  };
 
   return (
     <View style={styles.container}>
@@ -19,7 +25,7 @@ export default function App() {
           <FlatList
             data={todos}
             renderItem={({ item }) => (
-              <Text>{item.text}</Text>
+              <TodoItem item={item} pressHandler={pressHandler} />
             )}
           />
         </View>

my-project/components/todoItem.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import {StyleSheet, TouchableOpacity, Text} from 'react-native';
+
+export default function TodoItem({ pressHandler, item }) {
+  return (
+    <TouchableOpacity onPress={() => pressHandler(item.key)}>
+      <Text style={styles.item}>{item.text}</Text>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  item: {
+    padding: 16,
+    marginTop: 16,
+    borderColor: '#bbb',
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderRadius: 1,
+    borderRadius: 10,
+  }
+});