Completando y eliminando TODOs

Curso de Introducción a React.js

Primeros pasos con React

Cómo aprender React.js

Cuándo usar React.js

Cambios en React 18: ReactDOM.createRoot

Instalación con Create React App

Fundamentos de React: maquetación

JSX: componentes vs. elementos (y props vs. atributos)

Componentes de TODO Machine

CSS en React

Fundamentos de React: interacción

Manejo de eventos

Manejo del estado

Contando y buscando TODOs

Completando y eliminando TODOs

Fundamentos de React: escalabilidad

Organización de archivos y carpetas

Persistencia de datos con Local Storage

Custom Hook para Local Storage

Manejo de efectos

React Context: estado compartido

useContext

Modales y formularios

Portales: teletransportación de componentes

Formulario para crear TODOs

Quiz: Modales y formularios

Retos

Reto: loading skeletons

Reto: icon component

Próximos pasos

Deploy con GitHub Pages

Toma el Curso de React.js: Patrones de Render y Composición

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Para crear las funcionalidades de completar y eliminar TODOs podemos crear una función que reciba el id o texto de nuestro TODO, para después editarlo o eliminarlo.

Completando TODOs

Creamos la función completeTodo, que recibirá el texto de nuestro TODO, ubicamos el TODO en nuestro arreglo, cambiamos el valor de la propiedad completed de nuestro TODO y muy importante actualizar nuestro estado, para que React pueda re-renderizar nuestros TODOs con los nuevos datos.

const completeTodo = (text) => {
    const todoIndex = todos.findIndex(todo => todo.text === text);
    const newTodos = [...todos];
    newTodos[todoIndex].completed = true;
    setTodos(newTodos);
  };

Eliminando TODOs

Podemos hacer algo parecido a la función de completar, pero ahora, en lugar de cambiar si está completada o no, solamente la eliminaremos de nuestros TODOs con el método splice, y también regresaremos un nuevo arreglo con los TODOs actualizados.

const deleteTodo = (text) => {
    const todoIndex = todos.findIndex(todo => todo.text === text);
    const newTodos = [...todos];
    newTodos.splice(todoIndex, 1);
    setTodos(newTodos);
  };

App.js

Una vez tenemos creada la lógica para completar y eliminar TODOs, podemos pasar esas funciones a nuestros TodoItem.

import React from 'react';
import { TodoCounter } from './TodoCounter';
import { TodoSearch } from './TodoSearch';
import { TodoList } from './TodoList';
import { TodoItem } from './TodoItem';
import { CreateTodoButton } from './CreateTodoButton';
// import './App.css';

const defaultTodos = [
 { text: 'Cortar cebolla', completed: true },
 { text: 'Tomar el cursso de intro a React', completed: false },
 { text: 'Llorar con la llorona', completed: true },
 { text: 'LALALALAA', completed: false },
];

function App() {
 const [todos, setTodos] = React.useState(defaultTodos);
 const [searchValue, setSearchValue] = React.useState('');

 const completedTodos = todos.filter(todo => !!todo.completed).length;
 const totalTodos = todos.length;

 let searchedTodos = [];

 if (!searchValue.length >= 1) {
   searchedTodos = todos;
 } else {
   searchedTodos = todos.filter(todo => {
     const todoText = todo.text.toLowerCase();
     const searchText = searchValue.toLowerCase();
     return todoText.includes(searchText);
   });
 }

 const completeTodo = (text) => {
   const todoIndex = todos.findIndex(todo => todo.text === text);
   const newTodos = [...todos];
   newTodos[todoIndex].completed = true;
   setTodos(newTodos);
 };

 const deleteTodo = (text) => {
   const todoIndex = todos.findIndex(todo => todo.text === text);
   const newTodos = [...todos];
   newTodos.splice(todoIndex, 1);
   setTodos(newTodos);
 };
 
 return (
   
     
     

     
       {searchedTodos.map(todo => (
          completeTodo(todo.text)}
           onDelete={() => deleteTodo(todo.text)}
         />
       ))}
     

     
   
 );
}

export default App;

TodoItem.js

Para que nuestra aplicación funcione también tenemos que recibir las props en nuestros ítems y usarlas.

import React from 'react';
import './TodoItem.css';

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <span
        className={`Icon Icon-check ${props.completed && 'Icon-check--active'}`}
        onClick={props.onComplete}
      >
        √
      span>
      <p className={`TodoItem-p ${props.completed && 'TodoItem-p--complete'}`}>
        {props.text}
      p>
      <span
        className="Icon Icon-delete"
        onClick={props.onDelete}
      >
        X
      span>
    li>
  );
}

export { TodoItem };

Contribución creada por: Brandon Argel.

Aportes 98

Preguntas 38

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Marcelo Diaz

hace 2 años

Por favor, un curso intermedio y uno avanzado con este mismo profe. Es muy simple y claro a la vez.

Lucas Frezzini

hace 2 años

Yo me tome el atrevimiento y cambie el método completeTodo() por toggleCompleteTodo() para permitir que destilde de completado algún TODO que le marco completado sin querer. De esta forma sigue funcionando todo y me parece más genial para el usuario por si se confunde.
.
La solución me quedo asi:

const toggleCompleteTodos = (text) => {
	const todoIndex = todos.findIndex(todo => todo.text === text);
	const newTodos = [...todos];
	newTodos[todoIndex].completed = !newTodos[todoIndex].completed;
	setTodos(newTodos);
}

Hasta ahora, excelente curso BatiProfe 😃

Ciro Villafraz

hace 2 años

Otra forma de borrar los todos

function deleteTodo(text){
    const newTodos = todos.filter(todo=>todo.text !== text)
    setTodos(newTodos)
  }

Javier Andres Laverde Pico

Si ya tienes una cuenta,

Curso de Introducción a React.js

Completando y eliminando TODOs

Completando TODOs

Eliminando TODOs

App.js

TodoItem.js

Así va quedando mi Todo-Machine 🔥

Le añadí un botón para editar Todos 🦾

App.js

TodoItem.js