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;
}
Top comments (1)
Hi, Giandomenico! Add to your project prettier.io/ This will help you improve the style of the code. Happy codding! )