Contando TODOs

JUAN JOSE HERNANDEZ MUÑOZ

student•

Es raro estar en un curso desde el principio 😅. Por lo general los comentarios que veo son de hace uno o dos años. Ahora literal veo tres comentarios(10/05/23). HOLA GENTE DEL FUTURO uwu

Felix Torres Javier Antonio

student•

Jajjaja lo mismo pensé.

Andrea Arevalo

student•

Hola Desde el futuro también jajajaja

JUAN CAMILO CAMPO TANGARIFE

student•

Hola JD, cuando dices que no se puede compartir estados de un componente hijo a un padre, claro indicas "Al menos por ahora" te refieres a que es poco recomendable hacerlo? ósea sí se puede, de una forma un poco ortodoxa pero yo lo logré utilizando un useEffect. no sé si sea lo recomendado y qué problemas puede llegar a tener.


export const ComponenteHijo = ({onChange}) =>{
	const [state, setState] = useState('valor inicial')
	
	useEffect(()=>{
		onChange(state)
	},[state])
}

y en el componente padre lo recibo así:


export const ComponentePadre = () =>{
	return (
		<>
			<ComponenteHijo onChange={ (e) => console.log(e) } />
		</>
	)
}

ya defino si el valor del evento onChage, lo almaceno en otro estado del padre o decido hacer una lógica distinta, pero si obtengo un valor de un estado que puede cambiar.

Juan Castro

teacher•

Muy buen experimento :clap: Creo que en vez de decir "al menos por ahora" debí decir "al menos sin hacer experimentos y hacks algo raros" Tu código está muy bien, pero fíjate que el componente padre sigue sin recibir props desde el componente hijo, lo que recibe es una función callback (por decirlo de alguna forma) desde la prop que le está enviando al componente hijo, lo que está muy bien, pero aún así no es una prop del componente padre :D

JUAN CAMILO CAMPO TANGARIFE

student•

Claro tienes razón, literalmente entonces no se podría recibir PROPS de un componente hijo, pero si se podría extraer valores como se muestra en el callback del hijo.

Muchas gracias por tu feedback :D

Julian alonso Robayo rojas

student•

Ando en un Bootcamp Fullstack y ya tenia la suscripción a Platzi desde hace 6 meses pausada porque no la estaba utilizando y ya había empezado el Bootcamp y que grata sorpresa ver este curso de React porque aunque mi profe del Bootcamp es un teso , soy de las personas que tiene que ver una clase mas de 1 vez para aprender y como Juan lleva la clase pasito a pasito como si le explicara a un niño de primaria me ha parecido muy bueno

Jonathan Guidi

student•

¿Cómo comunico informacion de mi estado entre componentes? .. Podemos comunicar informacion del "Estado" entre componentes utilizando las "props" pero hay que tener en cuenta que esa informacion la podemos compartir ++Solamente de "Componentes Padres a Componentes Hijos."++ Es decir, debemos declarar el "Estado" dentro del Componente Padre (En este caso App.js) para poder comunicarlo al componente hijo a través de "props" (TodoSearch.js)

Diego Reyes

student•

JAJAJAAJA no pude evitar morirme de risa en el momento en que Juan dice

"Entonces, ¿Cómo compartimos el estado de un componente hijo a un padre?. La respuesta es clara... No se puede"

JAJAJAJJA

milton coronado

student•

me parece que la respuesta es un provider y un consumer, si no talvez useContext y si no es asi ya con useCustomHook bueno he dado todas las posibles soluciones para mi claro esta, corrijanme por fa por que si tal o por que no tal o por que no se puede jejeje saludos

Rauling Emilio Vásquez Guerrero

student•

Excelente explicación; una de las mejores clases que he visto. Gracias

Alejandro Calderón

student•

Entonces podemos verlo asi:

Los estados son un tipo de variables de React, especialmente optimizadas en la dinamica de sus valores dentro del programa y a su efecto en el DOM o** interfaz.**
Como los estados son variables como tal, pueden tener otras variables que broten de su base,** los estados derivados**

Alejandro Chavez

student•

Así lo abordé, con un ternario, sin hacer cambios de estado.

Vamos a ver si era asi 👀

Jose Ever Muñoz Muñoz

student•

complejo, pero excelente

Dave Juanes

student•

Como ya definimos el useState por defecto simplemente:

const totalTodos = todos.length;

Y nuestro todoCounter:

<TodoCounter 
      completed={completedTodos} total={totalTodos} />

Dave Juanes

student•

Clase 8 - Contando TODO's

Comunicacion entre componentes padres e hijos. Los estod sunicamente pueden compartirse entre padres e hijos.

Necesitamos combinar los estados con los props, los estados deben estar en el componente padre, para esto cortaremos el codigo del componente TodoSearch:

const [searchValue, setSearchValue] = React.useState('');

Y lo pegamos en el componente App por ser este el padre, ahora en el componente App invocamos el componente TodoSearch pero debemos enviarle como props el estado y su actualizador:

<TodoSearch 
  searchValue={searchValue}
  setSearchValue={setSearchValue}
/>

Ahora debemos destructurar las props desde el componente TodoSearch:

TodoSearch({
  searchValue,
  setSearchValue,
})

Una vez pegado el codigo, podemos ver el resultado con un console.log: Output devtools:

Los usuarios buscan todos de l
Los usuarios buscan todos de la
Los usuarios buscan todos de las

Ahora para utilizar los datos en JS definimos una constante:

const [todos, setTodos] = React.useState(defaultTodos);

Definimos por defecto el array inicial dentro de useState. Luego definimos dos constantes para los Todos completados y el total de todos:

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

Dentro de este codigo definimos una constante completeTodos bajo el estado todos de useState donde debemos filtrar los todos completados para eso la manipulamos el array con filter y le decimos a React que manejaremos valores Bool con la doble admiración por delante de la propiedad !!todo.complete Esto con la finalidad de usar True o False, finalmente utilizamos lenght para definir la longitud del array.

Finalmente enviamos estas props al componente App:

<TodoCounter 
  completed={completedTodos}
  total={totalTodos} 
/>

Y listo nos muestra los completados y los totales.

Luis Miguel Rodriguez

student•

para el reto de filtrar los todos lo realicé tal que así:

 // Estado para el search value
   const [searchValue,setSearchValue] = React.useState('');
   // filtrar los todos
   const filteredTodos = defaultTodos.filter(todo =>
    todo.text.toLowerCase().includes(searchValue.toLowerCase())
  );

lo que hago es que dentro de la función de flecha, se verifica si el texto de cada tarea (todo.text) incluye el valor de búsqueda (searchValue). Para evitar problemas de mayúsculas/minúsculas y asegurar una comparación insensible a ellas, tanto el texto de la tarea como el valor de búsqueda se convierten a minúsculas utilizando el método toLowerCase().

Si el valor de búsqueda está contenido en el texto de la tarea (ignorando mayúsculas/minúsculas), la expresión todo.text.toLowerCase().includes(searchValue.toLowerCase()) devolverá true, lo que significa que la tarea cumple con la condición de filtrado

y dentro del TodoList hago lo siguiente:

{filteredTodos.map(todo => (
  <TodoItem
    key={todo.text}
    text={todo.text}
    completed={todo.completed}
  />
))}

y por ultimo: , la expresión {filteredTodos.map(todo => ... )} se encarga de iterar sobre las tareas filtradas y renderizar un componente <TodoItem>

Desmostración

Armando Martínez

student•

Para contar el total de TODOs lo que hice fue un simple length del array

 const completedTodos = todos.filter(item => {
    return item.completed === true; 
  }).length;

  const totalTodos = todos.length;

Jose Alejandro Boscan Nava

student•

Juan mis felicitaciones es increible lo que hiciste con la fabrica de react ojala conviertan la mayor parte de las clases semejante a estas saludo y sigue cosechando exito

Ramiro Pollevik

student•

Tengo una duda técnica con respecto a la actualización de los estados derivados. El estado derivado, se actualiza porque dentro de el se esta usando un estado o (asumo la respuesta correcta) se actualiza, porque esta dentro del componente que se vuelve a rerenderizar al haber una modificación del estado? Finalmente lo importante es que el derivado se actualiza, pero me gustaria entender su funcionamiento real.

Juan Castro

teacher•

Los estados derivados al final solo son variables que están sacando o calculando un valor a partir del estado. Así que los estados derivados solo se actualizan cuando el estado que consumen cambia. Y cada vez que un estado cambia se vuelve a renderizar el componente. :D

Yerson Garza

student•

Para obtener la cantidad de TODOs de manera simple

const totalTodos = todos.length;

Axel Eduardo Moncada Barriga

student•

Este reto me saco canas pero asi lo logre, primero en app.js le pase el valor convertido en minusculas atraves del props como hicimos anteriormente el nombre

Luego en todoItem.js lo que hice fue capturarlo y con condicionales devolver el valor , primero creamos las variables :

y ya con la utilizacion del booleano, cuando busque algo igual al props.text va a devolver el <li> como lo hicimos al inicio, y si el booleano es false ("cuando el props text es diferente o esta vacio") solo hace return de <p> vacio

Ulqernesh Karvenae

student•

Buscando la longitud

  const totalTodos = defaultTodo.length;

Valentina Hernández

student•

Gracias por tu aporte, lo lei como spoiler buscando otras dudas.. y viendo los demas aportes 😎😁😁😁

JUAN SILVA

student•

No entiendo a quien se le ocurrio enseñar a principiantes programacion con JavaScript. LLevo años programando y puedo decir que este lenguaje es para niveles intermedios a avanzados.

Felipe Madrigal

student•

jajajajajajajaja ok

Edgar Wilson Vásquez Coronado

student•

Como "todos" es un array, le paso su tamaño a totalTodos

  const totalTodos = todos.length;

Y este valor lo envio al componente TodoCounter

<TodoCounter todosCompleted={completedTodos} totalTodos={totalTodos}  />

Iván Andrés Soto Caro

student•

Hola, tengo una duda.

la constante completedTodos recibe un valor del todos.filter, al momento de agregar un nuevo elemento al array se ejecutara el filter pasandole otro valor a la constante, esto no generaria un error ya que no se le puede reasignar otro valor a la constante, quien puede explicarme por favor.

Jose Ever Muñoz Muñoz

student•

lo que pasa es que cuando el estado todos cambia, el componente se vuelve a renderzar, por lo cual se vuelve a declarar la constante, no estamos cambiando el valor de la constante, estamos declarando una nueva cada vez.

Patricia Ramirez

student•

mi solucion al nuevo estado derivado de totalTodos fue : const totalTodos = todos.filter((todo) => !!defaultTodos).length;

jejejejej el camino más largo posible

 // Estado para el search value
   const [searchValue,setSearchValue] = React.useState('');
   // filtrar los todos
   const filteredTodos = defaultTodos.filter(todo =>
    todo.text.toLowerCase().includes(searchValue.toLowerCase())
  );

Contando TODOs

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