No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

Crear TODOs: React Context dentro de React Portals

27/34
Recursos

Aportes 13

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

juan te chorearon la taza

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.

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

la 煤nica duda que tengo es鈥 驴qu茅 pas贸 con la taza? jajajaja

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 鈥渋d鈥 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 馃

Lo hice sin usar el Usecontex, pero la termine

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

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

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

lo que yo vi 鈥 馃槃

Observando esta manera de pasar nuevos estados al useState(), habia una forma en la que se realizaba la operacion dentro de una funcion -> (previous_value) => { return [...previous_value, valor_a_agregar]}. Hay alguna implicacion, o mejor practica para actualizar este estado de variables?

Jejeje 鈥淛uan toca cortar鈥. jejeje