import React, { useState } from
'react'
;
import { Container, InputGroup, FormControl,
Button, ListGroup, CloseButton
} from
'react-bootstrap'
;
const TodoList = () => {
const [todos, setTodos] = useState([]);
const [task, setTask] = useState(
''
);
const handleAddTodo = () => {
if
(task.trim() !==
''
) {
setTodos([...todos, task]);
setTask(
''
)}};
const handleRemoveTodo = (index) => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);};
return
(
<Container className=
"mx-auto"
style={{ maxWidth:
'400px'
}}>
<InputGroup className=
"mb-3"
>
<FormControl type=
"text"
placeholder=
"Add a new task"
value={task}
onChange={
(e) =>
setTask(e.target.value)} />
<Button variant=
"primary"
onClick={handleAddTodo}>
Add
</Button>
</InputGroup>
<ListGroup>
{todos.map((todo, index) => (
<ListGroup.Item key={index}>
{todo}
<CloseButton style={{ float:
"right"
,
marginLeft:
"5px"
,
fontWeight:
"bold"
,
cursor:
"pointer"
}}
onClick={() =>
handleRemoveTodo(index)} />
</ListGroup.Item>))}
</ListGroup>
</Container>)};
export
default
TodoList;