Skip to content

Instantly share code, notes, and snippets.

@thomaslombart
Created August 29, 2020 14:12
Show Gist options
  • Save thomaslombart/0d274d471add1e7ff1b1ff4701d1390c to your computer and use it in GitHub Desktop.
Save thomaslombart/0d274d471add1e7ff1b1ff4701d1390c to your computer and use it in GitHub Desktop.
A to-do app written with React
import React from "react";
function Todos({ todos: originalTodos }) {
const filters = ["all", "active", "done"];
const [input, setInput] = React.useState("");
const [todos, setTodos] = React.useState(originalTodos || []);
const [activeFilter, setActiveFilter] = React.useState(filters[0]);
const addTodo = (e) => {
if (e.key === "Enter" && input.length > 0) {
setTodos((todos) => [{ name: input, done: false }, ...todos]);
setInput("");
}
};
const filteredTodos = React.useMemo(
() =>
todos.filter((todo) => {
if (activeFilter === "all") {
return todo;
}
if (activeFilter === "active") {
return !todo.done;
}
return todo.done;
}),
[todos, activeFilter]
);
const toggle = (index) => {
setTodos((todos) =>
todos.map((todo, i) =>
index === i ? { ...todo, done: !todo.done } : todo
)
);
};
const remove = (index) => {
setTodos((todos) => todos.filter((todo, i) => i !== index));
};
return (
<div>
<h2 className="title">To-dos</h2>
<input
className="input"
onChange={(e) => setInput(e.target.value)}
onKeyDown={addTodo}
value={input}
placeholder="Add something..."
/>
<ul className="list-todo">
{filteredTodos.length > 0 ? (
filteredTodos.map(({ name, done }, i) => (
<li key={`${name}-${i}`} className="todo-item">
<input
type="checkbox"
checked={done}
onChange={() => toggle(i)}
id={`todo-${i}`}
/>
<div className="todo-infos">
<label
htmlFor={`todo-${i}`}
className={`todo-name ${done ? "todo-name-done" : ""}`}
>
{name}
</label>
<button className="todo-delete" onClick={() => remove(i)}>
Remove
</button>
</div>
</li>
))
) : (
<p className="no-results">No to-dos!</p>
)}
</ul>
<ul className="list-filters">
{filters.map((filter) => (
<li
key={filter}
className={`filter ${
activeFilter === filter ? "filter-active" : ""
}`}
onClick={() => setActiveFilter(filter)}
>
{filter}
</li>
))}
</ul>
</div>
);
}
export default Todos
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment