Optimus Agency | Desarrollo Web Profesional

App.jsx

Asistente de Importación CSV: Parsear, Mapear, Validar

hard⏱ 20 minreactlesson

Un asistente de importación de cuatro pasos: pegar CSV → parsear → mapear columnas → validar → importar. La base solo parsea y previsualiza — el resto del pipeline es tuyo.

Tus tareas:

TODO(A) — Mapeo de columnas: un <select> por campo objetivo sobre los headers parseados (adivina el mapeo inicial por nombre de header); construye cada registro con Object.fromEntries sobre el mapeo.

TODO(B) — Validación por fila: nombre requerido, email plausible, edad numérica 0–130 cuando exista ("eighty" debe fallar un chequeo real con isNaN/Number); junta los códigos de problema por fila en errors.

TODO(C) — Reporte agrupado: una pasada de reduce pliega los problemas de todas las filas a { tipo: [números de fila] }, renderizado desde Object.entries.

TODO(D) — Compuerta de importación: el botón dice cuántas filas están limpias, queda disabled cuando no hay ninguna, e importa solo las limpias.

Why this happens

Un wizard es un pipeline de derivaciones colgando de dos piezas de estado: el CSV parseado y el mapeo. Object.fromEntries aparece dos veces haciendo lo que mejor hace — construir objetos con claves desde listas de pares: una para adivinar el mapeo (claveObjetivo → header), otra por fila para construir registros (claveObjetivo → celda). Como los registros se derivan vía useMemo de [parsed, mapping], cambiar un <select> re-mapea todas las filas al instante, sin un paso imperativo de re-procesamiento. La validación devuelve códigos de problema por fila, y el reporte es el fold groupBy canónico: reduce a { tipo: [filas] }, Object.entries para renderizar. La compuerta de importación cierra el ciclo — disabled={clean.length === 0} hace que la acción inválida sea imposible de clicar en la UI en vez de atraparse después del hecho.

Asistente de Importación CSV: Parsear, Mapear, Validar

hard⏱ 20 minreactlesson

Un asistente de importación de cuatro pasos: pegar CSV → parsear → mapear columnas → validar → importar. La base solo parsea y previsualiza — el resto del pipeline es tuyo.

Tus tareas:

TODO(C) — Reporte agrupado: una pasada de reduce pliega los problemas de todas las filas a { tipo: [números de fila] }, renderizado desde Object.entries.

TODO(D) — Compuerta de importación: el botón dice cuántas filas están limpias, queda disabled cuando no hay ninguna, e importa solo las limpias.

Why this happens