import React, { useContext } from "react"; import { ListGroup, ListGroupItem } from "reactstrap"; import { FaCheck } from "react-icons/fa"; import { TodoContext } from "../context/TodoContext"; import { REMOVE_TODO } from "../context/action.types"; import "bootstrap/dist/css/bootstrap.min.css"; const Todos = () => { const { todos, dispatch } = useContext(TodoContext); return ( <ListGroup className="mt-5 mb-2 items"> {todos.map(todo => ( <ListGroupItem key={todo.id}> {todo.todoString} <span className="float-end" onClick={() => { dispatch({ type: REMOVE_TODO, payload: todo.id }); }} > <FaCheck /> </span> </ListGroupItem> ))} </ListGroup> ); }; export default Todos;