Crear TODOs: React Context dentro de React Portals

Juan Sifontez

student•

Probando la app me conseguí un bug.

Si abres el modal y le das añadir, se agregará un TODO sin texto. Pero tengo la solución.

Existen muchas formas de validación para indicarle al usuario lo que falta. En nuestro caso, por ser un formulario sencillo, basta con agregarle la propiedad required al <textarea /> de TodoForm. quedando así:

<textarea
  placeholder="Cortar cebolla para el almuerzo"
  value={newTodoValue}
  onChange={onChange}
  required
/>

Con eso, el evento submit del formulario no se ejecutará si el textarea está vacío.

cristian camilo rios alvarez

student•

Super el Dato Juan muchas Gracias

Ivan Rojas

student•

gracias campeón ✌

Esteban Vladimir Alvarenga Gutiérrez

student•

Algo que es ⚠️PELIGROSO⚠️ y que sucede con nuestro Todo-List es que crashea si insertamos dos tareas con exactamente el mismo texto. Esto sucede porque en nuestro listado no usamos Números Id únicos. Nuestro "id" es la key del texto. Pero cuando agregamos algo igual, nuestro código no esta preparado para luchar contra eso. Por eso Agregué una validación con la misma filosofía del buscador, para que a la hora de ingresar un TODO, valida si este ya existe. Funciona así:

Al agregar exactamente el mismo texto. Se dispara un alerta (lo sé, es el alerta default, más adelante lo agregaré estilos xd) y esto evita que se pueda agregar esa tarea. Muestra el aviso, bloquea el botón de agregar, y limpia el input. Aún tiene unos fallos, pero ya cumple con su función.

Lo hice de la siguiente manera:

Cree un nuevo estado en el TodoContextg, el cual funciona igual que nuestro searchValue. También cree un método validatting, que recibe el text del input de agregar, lo valida con nuestro array existente y si encuentra un resultado similar, dispara un cambio de status, la alerta y agrega un nuevo value al input. y abajo del archivo retorno las funciones.

Después, en el formulario, paso mediante el todo context la función validatting y validstatus para poder usarlas de la siguiente manera:

En el onChange llamo a validatting, y le digo al textarea que cuando se active su funcion onFocus, mande a llamar también a validatting.

Y por último, en appUI:

Estoy llamando también a validatting. Esto para que se active desde el momento de la rederización. Me pasaba que si lo activaba desde que se empezaba a escribir, llevaba un delay de un caracter, y no validaba de forma precisa, por eso lo implementé de esa manera.

Es algo confuso, si gustan ver todo el código acá les dejo mi repo: https://github.com/Alvarenga144/TodoList-Reactjs18 🫡

Ivan Daniel Manrique

student•

Le hice unos cambios, debido a que se producía un bucle infinito const validatting = (text) => { const newTodos = [...todos]; const todoIndex = newTodos.findIndex((todo) => todo.text === text); if (todoIndex !== -1) { setValidStatus(!validStatus); alert('Ya existe esa tarea'); setNewTodoValue(''); } console.log("validatting function called"); }

Y a la hora de llamarlo lo encapsulé en una función anónima:

onFocus={() => validatting(newTodoValue)}

Cristian Leonardo Castañeda Olarte

student•

Lo que hice yo fue agregar un campo key a cada tarea usando esta librería:

De la siguiente forma en la función addTodo:

const addTodo = (text) => { const newTodos = [...todos]; newTodos.push({ key: uuidv4(), text, completed: false, }); saveTodos(newTodos); }

También modifique las funciones completeTodo y deleteTodo para que haga la validación por medio de la key y no del text.

Alexander Moreno

student•

Para evitar que en la descripcion se guarden con espacios vacios al inicio y al final podemos utilizar la funcion trim() ademas se puede hacer una validacion para que la descripcion del todo no este vacia

desabilite el boton de anadir y agregue unos estilos si no es una descripcion de todo valida

Daniel Merchán Cáceres

student•

que tema usas y que font usas? Se ve muy bien 👍🏽

manuel arias

student•

la única duda que tengo es... ¿qué pasó con la taza? jajajaja

John Malku Córdova Sinchico

student•

lo que yo vi .. :D

Felix Araque

student•

Para cerrar la ventana modal clicando fuera yo lo he conseguido hacer así: . El el archivo Modal.jsx he agregado el useContext y en el evento onClick del div cierro la modal:

function Modal({ children }) {
    const {setOpenModal} = useContext(TodoContext)

    return ReactDOM.createPortal(
        <div className="ModalBackground" onClick={() => setOpenModal(false)}>
            {children}
        </div>,
        document.getElementById("modal")
    )
}

. Luego en el archivo TodoForm.jsx he añadido un div por encima del formulario y a su evento onClick le he añadido e.stopPropagation() para que al clicar aquí no se cierre la modal

function TodoForm() {
    const {addTodo, setOpenModal} = useContext(TodoContext)
    const [textValue, setTextValue] = useState("")

    function onSubmit(e) {
        e.preventDefault()
        addTodo(textValue)
        setOpenModal(false)
    }

    return (
        <div onClick={(e) => e.stopPropagation()}>
            <form onSubmit={onSubmit}>
                <label>Escribe tu nuevo TODO</label>
                <textarea 
                    placeholder="Cortar cebolla..." 
                    value={textValue} 
                    required
                    onChange={(e) => setTextValue(e.target.value)} 
                />
                <div className="TodoForm-buttonContainer">
                    <button 
                        type="button" 
                        className="TodoForm-button TodoForm-button--cancel"
                        onClick={() => setOpenModal(false)}
                    >
                        Cancelar
                    </button>
                    <button 
                        type="submit" 
                        className="TodoForm-button TodoForm-button--add"
                    >
                        Añadir
                    </button>
                </div>
            </form>
        </div>
    )
}

LUZ ADRIANA GONZALEZ MEJIA

student•

Hola a Todos !! Alguien sabe porque me sale este Error ??cuando intento agregar un TODO nuevo TypeError: Cannot read properties of undefined (reading toLowerCase)

Diego Fernando Pallares Ramirez

student•

Lo pudiste arreglar a mi me salia, a mi me salia porque en modal,js tenia Children en minúsculas, este error he notado que es random, te puede fallar cualquier cosita, y sale ese error.

Jose Ever Muñoz Muñoz

student•

Tuve el mismo error y en mi caso era porque había puesto mal el state en Modal/index.js.

//los puse así como si fuera un objeto
const {newTodoValue, setNewTodoValue}= React.useState('');
//y debe ser así como un array
const [newTodoValue, setNewTodoValue] = React.useState('');

Andrés Camilo Salgado

student•

Lo hice sin usar el Usecontex, pero la termine

Federico Arias

student•

Yo igual! Intente implementarlo (unas 3 horas) y no pude, me queda pendiente aprenderlo!

Diego Fernando Pallares Ramirez

student•

me corto un poquito el ritmo que a mitad del proceso, realizara un orden, yo desde un principio tenia otro orden, y clases como el contex y el usecontext no lo hice porque era muy abrumador tantos cambios. y ahora estoy sufriendo porque no se como ejecutar el addTodo cuando se le da al boton crear, agregue una pregunta mostrando como lo tengo por si se apiadan y me quieren ayudar, gracias

Juan Castro

teacher•

Tienes un commit antes de la reorganización, Diego?

Diego Fernando Pallares Ramirez

student•

https://github.com/DiegoPallares/ControlTaks/tree/main/src

Este es mi repositorio, profe,

Creo tareas pero con los datos quemados, no con el input del text Area.

Fernando Moyano

student•

Para que visual studio ayude con el autocompletado en este caso del "todoContext" en la importación ,el archivo debe estar abierto , o en su defecto una vez que lo abren y cierran les aparecera el autocompletado.

SANTIAGO CANO GONZALEZ

student•

Formas de uso para el useState()

Hola comunidad platzi, Observando esta manera de pasar nuevos estados al useState() en el min:10:00 de esta clase, habia una forma en la que se realizaba la operacion dentro de una funcion, como el evento de cerrar el modal. -> En este ejemplo funcionaria de igual manera al de crear un arreglo a parte. (previous_value) => { return [...previous_value, valor_a_agregar]}.

Hay alguna implicacion, o mejor practica para actualizar estados en el useState?

Juan Castro

teacher•

No se trata tanto de que sea una buena práctica o no, sino de cómo funcionan los actualizadores del estado en React (ya sea useState, useReducer o incluso el this.setState en React.Component)

Para aprender más sobre eso te recomiendo este curso: https://platzi.com/estado

Fernando Labastida Vázquez

student•

Hice dos validaciones: Para que no se puedan guardar ToDos vacíos, y para que no se puede agregar el mismo ToDo dos veces. Ambas en el TodoContext:

También le pasé el nuevo ToDo a addTodo usando el método .trim() para evitar conflictos de guardar el mismo ToDo dos veces (por ejemplo, si una tarea se llama 'hola', y otro ToDo se llama ' hola '). En TodoForm:

RODRIGO RESTREPO VILLA

student•

Juan David Castro Gallego como estas, tengo una duda con respecto a una funcionalidad extra que deseo colocar en el proyecto el cual calcula el numer de dias desde la creacion del proyecto hasta el cierre de la misma pero tengo dos dudas la primera es como hago que se vea mejor en las fechas, poder lograr una fecha corta y lo otro es calcular los dias con fecha del cierre y de apertura, te adjunto mi repositorio.

Juan Castro

teacher•

Para las fechas qué es lo que más te interesa? Días? Minutos? Semanas? Dependiendo de eso puedes usar los métodos de Date de JS nativo para mostrar el dato mucho más bonito, mira:

Ismael Ignacio Morinigo

student•

El mejor manager de tarea, bojack <3

cristian mateo usuga usuga

student•

hola tengo un problema que no logro resolver, cuando recargo la pagina efectivamente me carga pero a los 2 segundos la pagina queda totalmente en blanco, luego cuando miro la consola me aparece el siguiente error "Uncaught TypeError: todo.text.toLowerCase is not a function at TodoContext.js:23:1" este es el codigo que tengo en ese archivo y esa linea const searchedTodos = todos.filter( (todo) => { const todoText = todo.text.toLowerCase(); const searchText = searchValue.toLowerCase(); return todoText.includes(searchText); } );```js const searchedTodos = todos.filter( (todo) => { const todoText = todo.text.toLowerCase(); const searchText = searchValue.toLowerCase(); return todoText.includes(searchText); } );

Juan Castro

teacher•

Intenta con const todoText = todo?.text?.toLowerCase()

Jose Eleazar Gavidia Diaz

student•

Hola, en el punto en donde esta la app aqui en esta clase, se le puede añadir que descomplete una Todo, con esta linea

newTodos[todoIndex].completed = !newTodos[todoIndex].completed;

aqui

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

david carvajal

student•

Tengo una pregunta, por que en el formulario si se puede llamar al contexto con useContext, y dentro del boton createTodoButton si se lo debe pasar como props? yo hice la prueba desde el componente del boton de llamar al contexto para usar la funcion de abrir el modal, pero dio error. alguien sabe por que? es por alguna dependencia ciclica?

Jose Ever Muñoz Muñoz

student•

Jose Ever Muñoz Muñoz

student•

no es que debas hacerlo asi obligatoriamente, el uso del context es segun tu criterio, en cuanto a uar el context dentro del creatTodoButton si se puede y el codigo queda asi

import React from 'react';
import { TodoContext } from '../TodoContext';
import './CreateTodoButton.css';

function CreateTodoButton(){
  const {setOpenModal} = React.useContext(TodoContext);
  return (
    <button className="CreateTodoButton" 
      onClick={
        (e)=> {
         setOpenModal(state => !state)
        }
      }
    >+</button>
  )
}

export {CreateTodoButton}```

Luis Rodrigo Gil Reza Garduño

student•

me podrian orientar, porque mi todoform quedo asi? gracias.

David Dzul

student•

opte por usar React Hook Form para ahorrar un poco de tiempo

Pablo Cesar Acosta Paredes

student•

Tengo que admitir que el proyecto lo hice de una manera un poco distinta, pero siguiendo el curso a su ritmo, en mi caso no utilice un modal para agregar las tareas porque me fue un poco confuso pero de todas maneras pongo el código para quienes quieran agregar de manera directa las tareas

function Modal({ children }) {
    const {setOpenModal} = useContext(TodoContext)

    return ReactDOM.createPortal(
        <div className="ModalBackground" onClick={() => setOpenModal(false)}>
            {children}
        </div>,
        document.getElementById("modal")
    )
}

function TodoForm() {
    const {addTodo, setOpenModal} = useContext(TodoContext)
    const [textValue, setTextValue] = useState("")

    function onSubmit(e) {
        e.preventDefault()
        addTodo(textValue)
        setOpenModal(false)
    }

    return (
        <div onClick={(e) => e.stopPropagation()}>
            <form onSubmit={onSubmit}>
                <label>Escribe tu nuevo TODO</label>
                <textarea 
                    placeholder="Cortar cebolla..." 
                    value={textValue} 
                    required
                    onChange={(e) => setTextValue(e.target.value)} 
                />
                <div className="TodoForm-buttonContainer">
                    <button 
                        type="button" 
                        className="TodoForm-button TodoForm-button--cancel"
                        onClick={() => setOpenModal(false)}
                    >
                        Cancelar
                    </button>
                    <button 
                        type="submit" 
                        className="TodoForm-button TodoForm-button--add"
                    >
                        Añadir
                    </button>
                </div>
            </form>
        </div>
    )
}

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

import React from 'react';
import { TodoContext } from '../TodoContext';
import './CreateTodoButton.css';

function CreateTodoButton(){
  const {setOpenModal} = React.useContext(TodoContext);
  return (
    <button className="CreateTodoButton" 
      onClick={
        (e)=> {
         setOpenModal(state => !state)
        }
      }
    >+</button>
  )
}

export {CreateTodoButton}```

Crear TODOs: React Context dentro de React Portals

Introducción y requisitos

¿Qué necesitas para aprender React.js?

Maquetación con React.js

¿Qué es un componente?

Componentes de TODO Machine

¿Cómo se comunican los componentes? Props y atributos

Estilos CSS en React

Interacción con React.js

Eventos en React: onClick, onChange

¿Qué es el estado?

Contando TODOs

Buscando TODOs

Completando y eliminando TODOs

Librería de Iconos Personalizados

Iconos en React: librerías y SVG

Iconos con colores dinámicos

Herramientas avanzadas: escalabilidad, organización y persistencia

Local Storage con React.js

Custom Hooks

Organización de archivos y carpetas

Feature-First Directories en React

Tips para naming y abstracción de componentes React

¿Qué son los efectos en React?

Estados de carga y error

Actualizando estados desde useEffect

Reto: loading skeletons

¿Qué es React Context?

useContext

¿Qué son los React Portals?

Reto: estados para abrir y cerrar un modal

Maquetando formularios en React

Crear TODOs: React Context dentro de React Portals

Deploy

Despliegue de TODO Machine en GitHub Pages

Presentación de proyectos para tu portafolio

Próximos pasos: React #UnderTheHood

Diferencias entre versiones de React.js

¿Cuándo realmente necesitas React.js?

Bonus: creando proyectos en React desde cero

React con Create React App

React con Next.js

React con Vite