Created
February 24, 2019 18:53
-
-
Save toefel18/c859e71cd5701947058d3236fada909f to your computer and use it in GitHub Desktop.
React useState TODO app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState } from "react"; | |
import uuid from "uuid/v4"; | |
const Todo = ({ todo, deleteTodo }) => { | |
return ( | |
<li | |
key={todo.id} | |
style={{ textDecoration: todo.completed ? "line-through" : "" }} | |
> | |
{todo.text} <button onClick={() => deleteTodo(todo.id)}>X</button> | |
</li> | |
); | |
}; | |
const TodoList = ({ todos, deleteTodo }) => { | |
return ( | |
<ul> | |
{todos.map(todo => ( | |
<Todo todo={todo} deleteTodo={deleteTodo} /> | |
))} | |
</ul> | |
); | |
}; | |
const AddTodo = ({ addTodo }) => { | |
const [value, setValue] = useState(""); | |
const handleSubmit = e => { | |
e.preventDefault(); | |
if (!value) return; | |
addTodo(value); | |
}; | |
return ( | |
<form> | |
<input | |
type="text" | |
value={value} | |
onChange={e => setValue(e.target.value)} | |
/> | |
<button onClick={handleSubmit}>Add Todos</button> | |
</form> | |
); | |
}; | |
const TodoApp = () => { | |
const [todos, setTodos] = useState([ | |
{ id: uuid(), text: "Todo 1", completed: false }, | |
{ id: uuid(), text: "Todo 2", completed: true } | |
]); | |
const addTodo = todo => { | |
const newTodos = [...todos, { id: uuid(), text: todo, completed: false }]; | |
setTodos(newTodos); | |
}; | |
const deleteTodo = todoUuid => { | |
const newTodos = todos.filter(todo => todo.id !== todoUuid); | |
setTodos(newTodos); | |
}; | |
return ( | |
<div> | |
<h2>Todo List</h2> | |
<TodoList todos={todos} deleteTodo={deleteTodo} /> | |
<AddTodo addTodo={addTodo} /> | |
</div> | |
); | |
}; | |
export default TodoApp; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
To init an app:
npx create-react-app todos
cd todos && npm install --save uuid