diff --git a/App.js b/App.js
index 5f31599..807ba3f 100644
--- a/App.js
+++ b/App.js
@@ -5,18 +5,15 @@ import {
TextInput,
View,
Button,
- ScrollView
+ ScrollView,
} from "react-native";
import AppBar from "./src/components/AppBar";
-import Todo from "./src/components/Todo";
-import TodoList from "./src/components/TodoList";
+import AddTodo from "./src/components/AddTodo";
+import TodoItem from "./src/components/TodoItem";
export default function App() {
const [title, setTitle] = useState("");
- // iniitalize empty object todo
- const [todo, setTodo] = useState({});
-
// Initalize empty array to store todos
const [todos, setTodos] = useState([]);
@@ -31,11 +28,11 @@ export default function App() {
};
// function to mark todo as checked or unchecked
- const checkTodo = id => {
+ const checkTodo = (id) => {
// loop through todo list and look for the the todo that matches the given id param
// update the state using setTodos function
setTodos(
- todos.map(todo => {
+ todos.map((todo) => {
if (todo.key === id) {
todo.isChecked = !todo.isChecked;
}
@@ -45,12 +42,14 @@ export default function App() {
};
// function to delete todo from the todo list
- const deleteTodo = id => {
+ const deleteTodo = (id) => {
// loop through todo list and return todos that don't match the id
// update the state using setTodos function
- setTodos(todos.filter(todo => {
- return todo.key !== id;
- }));
+ setTodos(
+ todos.filter((todo) => {
+ return todo.key !== id;
+ })
+ );
};
useEffect(() => {
@@ -63,18 +62,18 @@ export default function App() {
- setTitle(value)}
+ title={title}
+ setTitle={setTitle}
style={styles.textbox}
+ addTodo={addTodo}
/>
-
- {todos.map(todo => (
- (
+
+ props.setTitle(value)}
+ style={styles.textbox}
+ />
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ todo: {
+ flexDirection: "row",
+ width: "100%",
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ textbox: {
+ borderWidth: 1,
+ borderColor: "#7F39FB",
+ borderRadius: 8,
+ padding: 10,
+ margin: 10,
+ width: "80%",
+ },
+});
diff --git a/src/components/Todo.js b/src/components/Todo.js
deleted file mode 100644
index 2fa72c5..0000000
--- a/src/components/Todo.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, {useState} from "react";
-import { StyleSheet, TextInput, View, Button } from "react-native";
-
-export default function Todo(props) {
-
- const [title, setTitle] = useState('');
-
- return (
-
- setTitle(value)}
- style={styles.textbox} />
-
-
- );
-}
-
-const styles = StyleSheet.create({
- todo: {
- flexDirection: "row",
- width: "100%",
- justifyContent:'center',
- alignItems:'center'
- },
- textbox: {
- borderWidth: 1,
- borderColor: "#7F39FB",
- borderRadius: 8,
- padding: 10,
- margin: 10,
- width:'80%'
- }
-});
diff --git a/src/components/TodoList.js b/src/components/TodoItem.js
similarity index 89%
rename from src/components/TodoList.js
rename to src/components/TodoItem.js
index 418cc87..182cbe3 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoItem.js
@@ -3,7 +3,7 @@ import { StyleSheet, Text, View, ScrollView } from "react-native";
//import Icon from "react-native-vector-icons/Feather";
import Icon from "react-native-vector-icons/MaterialIcons";
-export default function TodoList(props) {
+export default function TodoItem(props) {
//console.log(props.todo, "logging props");
return (
@@ -36,16 +36,16 @@ const styles = StyleSheet.create({
backgroundColor: "white",
padding: 10,
borderBottomWidth: 0.5,
- borderBottomColor: "#666666"
+ borderBottomColor: "#666666",
},
leading: {
- width: "20%"
+ width: "20%",
},
title: {
width: "60%",
- fontSize: 18
+ fontSize: 18,
},
trailing: {
- width: "20%"
- }
+ width: "20%",
+ },
});