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;

And just a piece of css:

.App {
  text-align: center;
}

.btn-submit {
  margin: 1rem;
}

.list {
  max-width: 80vw;
}


.delete {
float: right;
}

Comments

[Victor Magarlamov]

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