DEV Community

Cover image for ToDo app Reactjs
GiandoDev
GiandoDev

Posted on

1 1

ToDo app Reactjs

Here I would use CRA
in order to keep the task fast and simple.
For the style I used Shards React, just to
try it.
DEMO

import React, {useState} from 'react';
import './App.css';
import {Container, Button, Form, FormInput} from "shards-react";

import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css"


function App() {
    // Set toDo List
    const [toDoList, setToDoList] = useState([])
// Set Input Value
    const [value, setValue] = useState([])

    // Handle the submission
const handleSubmit = (mouseClick) => {
        mouseClick.preventDefault()
        addTodo(value)
        setValue('')


}
    //  add toDo
const addTodo = (text) => {
    if(text !== ''){
        const updateTodoList = [...toDoList, {text}]
        setToDoList(updateTodoList)
    }

    }
    // Delete todo
const handleDelete = (todo) => {
 const  filteredToDolist  = toDoList.filter(currentToDoListValue => ( currentToDoListValue !== todo ))
    setToDoList(filteredToDolist)
}



    return (
        <Container>
            <h1>To do</h1>
            <Container className="toDoInput">
                <Form onSubmit={ handleSubmit}>
                    <FormInput
                    placeholder='type here'
                    value={value}
                    onChange={keyboardStroke => setValue(keyboardStroke.target.value)}
                    />
                    <Button className="btn-submit" type="submit">Add to-do</Button>
                </Form>
            </Container>
            <Container className="toDoList">
                {
                    toDoList.map((todo, index) => (
                        <div className="list" key={index}>
                            <span className="text">{todo.text}</span>
                            <Button className="delete" onClick={() => handleDelete(todo)}>Delete</Button>
                            <hr/>
                        </div>
                    ))
                }
            </Container>
        </Container>

    );
}

export default App;

Enter fullscreen mode Exit fullscreen mode

And just a piece of css:

.App {
  text-align: center;
}

.btn-submit {
  margin: 1rem;
}

.list {
  max-width: 80vw;
}


.delete {
float: right;
}
Enter fullscreen mode Exit fullscreen mode

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
victormagarlamov profile image
Victor Magarlamov

Hi, Giandomenico! Add to your project prettier.io/ This will help you improve the style of the code. Happy codding! )

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

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. ❤️