Renderizar listas de elementos y Formularios en React ⚛️ - Bootcamp FullStack Gratuito

Cuarta clase del Bootcamp FullStack gratuito para renderizar listas de elementos en React y trabajar con Formularios.

SUSCRÍBETE al canal 🔔 para no perderte las próximas clases:

Otros temas incluyen depuración de aplicaciones, configuración, gestión de entornos de ejecución y bases de datos NoSQL.

Anteriores clases:

¿Lo quieres ver en directo?

Segmentos:
00:00 - Introducción
01:43 - Renderizar listas de elementos en React
07:06 - Problemas al recorrer listas que pueden venir con tipos de datos incorrectos en React
12:44 - Uso de key en elementos en React
25:54 - Trabjando con ESModules en React
31:33 - Debugger, debugar tu app en React
43:15 - Manejando eventos de un Input en React
57:55 - Usando formularios en React

[lautaroriveiro]

Tardé 2 minutos en encontrar la solución que buscaba. Sabía que Midu lo había cubierto y tiene todo tan ordenado con los índices y tal que es fácil buscar las cosas 👏👏

[jestcodigos]

Cuando midu dice ya te lo explico yo me dan ganas de decirle maestro <3 jaja Que seriamos sin ti midu vi tu historia en la que tuviste tu año fatal de programacion y si te hubieras rendido que seria de todos nosotros GRANDE MIDU <3 sere como tu algun dia

[MiguelAngelCornejo]

Más de 2 semanas tratando de entender de porqué no me renderizaba la información de la API, haciendo consultas de diversas formas en chatgpt y similares. Me topo con este vídeo de casualidad por el algoritmo de YOU2 y lo único que necesitaba era poner un miserable return dentro del map luego de la arrow function. Gracias por nada ChatGPT, todas las gracias van a Midu 😂

[Alekox]

Te acabo de descubrir hoy y ya he seguido todos los videos del bootcamp. No tenía ni idea de react y me alegra ver que aprendo con facilidad gracias a como explicas. Un saludo!

[christophercarnavele]

excelente material midudev, tu aporte me a permitido ser un mejor desarrollador.muchas gracias

[juanpablojpaa]

GRACIAS Migue! <3 <3 <3
Estoy aprendiendo un monton y de forma muy profesional.
Le estoy dando like y compartiendo con todo el que puedo.
Cuando encuentre un trabajo de programador te lo agradecere de otra forma ;);)

[Jdbluesky]

Tremendo!! Muchas gracias por tus tips profesionales.

[jogre]

57:27 excelente consejo!! gracias maestro!

[ramonsorto]

Gracias a ti al fin entendí bien react haces un contenido de calidad

[davidrojas]

Gracias sos un capo, te sigo desde el video del spiner eres genial :)

[brauliorojas]

Grande Midu vamos por el Cuarto! Saludos!

[marcospm]

Primero de todo felicitar a Midu por la iniciativa, es genial y estoy aprendiendo un huevo!

Por otro lado, a ver si Midu o alguien puede echar una mano a este pobre novato jajaja

Estoy intentando extraer el form a un componente externo como indica el ejercicio 2.10, pero tengo problemas para manejar los onChange de los dos input que hay en el form (nombre y teléfono), ya que no me deja (lógico) pasar dos con el mismo nombre:

<PersonForm onSubmit={handleSubmit} onChange={handleNameChange} value={newName} onChange={handleNumberChange} value={newNumber} />

Mi form antes de extraerlo tenía esta pinta:

<form onSubmit={handleSubmit}>
<div>
name: <input onChange={handleNameChange} value={newName} />
</div>
<div>
number: <input onChange={handleNumberChange} value={newNumber} />
</div>
<div>
<button type="submit">add</button>
</div>
</form>



¿Qué puedo hacer?

[geekhadev]

Migue, en el minuto 9:25 se pudiera usar también el operador || al declarar la variable para forzar a que si es undefined, vacía o null y definimos siempre como null así evaluamos con menos código me refiero a algo como const notes = [] || null; y para evaluar solo if (notes && notes.length > 0) No se si estoy en lo correcto. Saludos y gracias por tus aportes

[bautista-cutraro]

1:05:05 podrias usar el profiler para explicarlo y ver como se re renderean

[bgva]

Hola, gracias por el vídeo, consulta: está esto subido a repositorio?

[Grishopping]

Saludos MIDUDEV muchas gracias por tus videos.... me estan sirviendo un monton para aclarar el pocoton de lagunas mentales jejejej que tenia (dudas) de

Piensas explicar ant design con ??? no se si te lo pregunte en otro video... puedes tambien explicar sobre STRAPI con react... que opinas???

nuevamente muchas gracias

Te saluda Jose Grillo

[luisfelipedelrisco]

Tengo una duda, en platzi utilizas éste mismo editos online o VScode?

[Deus-lo-Vuilt]

Midu, de casualidad como haces para dejar espacio de forma automatica entre las llaves? por ejemplo con { notes }, sin que quede pegado al formatearse supongo ??

[aldorsan]

Midu, una consulta, que no puedo encontrar respuestas en StackOverflow ni ningún lado:
Tengo que renderizar elementos en 3 listas distintas, que son componentes diferentes. Pero los elementos y su id provienen de una bd, y a veces me encuentro con el mismo elemento (y mismo id) en las 3 listas. Tengo el famoso error de la key única y no encuentro como sacarlo. La key es global o sólo aplicada para cada lista individualmente?

Desde ya muchas gracias, espero haber sido claro.

[edwardsoto]

por comentar un poco el filtro lo hice asi :3 .filter(notes => !filter|notes.important)