ToDo with tailwindCss
and CRA
DEMO
jsx:
import React, { useEffect, useState} from 'react';
import './styles/main.css'
import TodoForm from "./components/TodoForm";
import TodoList from "./components/TodoList";
const LOCAL_STORAGE_KEY = "react-todo-list-todos"
function App() {
const [todos, setTodos] = useState([])
useEffect(() => {
const storageTodos = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
if (storageTodos) {
setTodos(storageTodos)
}
}, [])
useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todos))
}, [todos])
function addTodo(todo) {
setTodos([todo, ...todos])
}
function toggleComplete(id) {
setTodos(
todos.map(todo => {
if(todo.id === id) {
return {
...todo,
completed: !todo.completed
}
}
return todo
})
)
}
function removeTodo(id) {
setTodos(todos.filter(todo => todo.id !== id ));
}
return (
<div className="flex flex-col items-center h-screen bg-grey-300">
<h1 className="mb-20 mt-3 text-5xl text-teal-600 underline font-mono text-lg ">React Todo</h1>
<TodoForm addTodo={addTodo}/>
<TodoList
todos={todos}
toggleComplete={toggleComplete}
removeTodo={removeTodo}
/>
</div>
);
}
export default App;
Top comments (0)