DEV Community

Cover image for ToDo app tailwindcss Reactjs
GiandoDev
GiandoDev

Posted on

4 1

ToDo app tailwindcss Reactjs

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;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️