lesson-11

Author: iamshaunjp

my-project/App.js

@@ -2,12 +2,13 @@ import React, { useState } from 'react';
 import { StyleSheet, Text, View, FlatList } from 'react-native';
 import Header from './components/header';
 import TodoItem from './components/todoItem';
+import AddTodo from './components/addTodo';
 
 export default function App() {
   const [todos, setTodos] = useState([
     { text: 'buy coffee', key: '1' },
     { text: 'create an app', key: '2' },
-    { text: 'play on the switch', key: '3' }
+    { text: 'play on the switch', key: '3' },
   ]);
 
   const pressHandler = (key) => {
@@ -16,11 +17,21 @@ export default function App() {
     });
   };
 
+  const submitHandler = (text) => {
+    setText('');
+    setTodos(prevTodos => {
+      return [
+        { text, key: Math.random().toString() },
+        ...prevTodos
+      ];
+    });
+  };
+
   return (
     <View style={styles.container}>
       <Header />
       <View style={styles.content}>
-        {/* add todo form */}
+        <AddTodo submitHandler={submitHandler} />
         <View style={styles.list}>
           <FlatList
             data={todos}

my-project/components/addTodo.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { StyleSheet, View, TextInput, Button } from 'react-native';
+
+export default function AddTodo({ submitHandler }) {
+  [text, setText] = useState('');
+
+  const changeHandler = (val) => {
+    setText(val);
+  };
+
+  return (
+    <View>
+      <TextInput 
+        style={styles.input} 
+        placeholder='new todo...'
+        onChangeText={changeHandler} 
+        value={text} 
+      />
+      <Button color='coral' onPress={() => submitHandler(text)} title='add todo' />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  input: {
+    marginBottom: 10,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ddd',
+  },
+});