Cargar y leer archivos CSV en React

Para leer un archivo CSV seleccionado en una aplicación React, usa un campo de selección de archivos y lee su objeto File en un controlador onChange. La API FileReader del navegador lee el archivo como texto; no convierte el texto CSV en filas y columnas. Usa papaparse cuando necesites que un analizador interprete la estructura CSV y devuelva los datos en filas.

Usa FileReader para leer archivos CSV en React

Añade un campo de selección de archivos nativo que acepte archivos .csv y pasa el archivo seleccionado a FileReader.readAsText(). La lectura es asíncrona, así que procesa el resultado en onload. La siguiente ilustración del código de una página del navegador no se ha ejecutado: muestra el texto del archivo y su etiqueta visible para seleccionar archivos permanece en inglés. En un componente de React, incluye el mismo campo en JSX y actualiza el estado del componente desde el controlador onload, en lugar de asignar el contenido directamente a textContent.

Este ejemplo de Node.js muestra cómo convertir texto CSV sencillo en objetos de fila. Supone que los campos no están entrecomillados y que todas las filas usan las mismas columnas; para archivos con sintaxis CSV general, usa un analizador CSV.

const csv = "name,score\nAva,18\nNoah,21";
const [headerLine, ...dataLines] = csv.trim().split(/\r?\n/);
const headers = headerLine.split(",");
const rows = dataLines.map((line) => {
  const values = line.split(",");
  return Object.fromEntries(headers.map((header, index) => [header, values[index]]));
});

console.log(JSON.stringify(rows, null, 2));

[
  {
    "name": "Ava",
    "score": "18"
  },
  {
    "name": "Noah",
    "score": "21"
  }
]

<label for="csv-file">Choose a CSV file</label>
<input id="csv-file" type="file" accept=".csv,text/csv">
<pre id="csv-text"></pre>
<script>
  const input = document.querySelector("#csv-file");
  const output = document.querySelector("#csv-text");

  input.addEventListener("change", (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = () => {
      output.textContent = String(reader.result);
    };
    reader.onerror = () => {
      output.textContent = "The file could not be read.";
    };
    reader.readAsText(file);
  });
</script>

En React, el controlador equivalente puede llamar a setCsvText(String(reader.result)) dentro de reader.onload y luego mostrar ese estado en un <pre>. El ejemplo solo lee el archivo seleccionado como texto. Para interpretar filas, encabezados, valores entrecomillados o delimitadores como datos CSV, pasa el texto del archivo a un analizador CSV o usa directamente una biblioteca de análisis.

Usa la biblioteca papaparse para leer archivos CSV en React

Instala Papa Parse en el directorio del proyecto React con npm install papaparse y luego impórtalo con import Papa from "papaparse". Usa un campo de selección de archivos nativo y pasa el File seleccionado a Papa.parse. El callback complete recibe un resultado cuya propiedad data contiene las filas analizadas; usa el estado del componente para mostrarlas. Consulta errors para ofrecer información sobre el análisis. Esta ilustración del código de una página del navegador no se ha ejecutado y supone que Papa Parse está disponible como el objeto global Papa; en un componente React, usa la importación del módulo anterior y coloca la lógica del callback en onChange. La ilustración muestra una salida en el DOM, no un renderizado de React.

<label for="csv-file">Choose a CSV file</label>
<input id="csv-file" type="file" accept=".csv,text/csv">
<pre id="csv-rows"></pre>
<script>
  const input = document.querySelector("#csv-file");
  const output = document.querySelector("#csv-rows");

  input.addEventListener("change", (event) => {
    const file = event.target.files[0];
    if (!file) return;

    Papa.parse(file, {
      header: true,
      complete: (results) => {
        output.textContent = JSON.stringify(results.data, null, 2);
        if (results.errors.length > 0) {
          console.warn("CSV parsing reported issues:", results.errors);
        }
      },
      error: (error) => {
        output.textContent = `The file could not be parsed: ${error.message}`;
      }
    });
  });
</script>

Con header: true, Papa Parse usa la primera fila como claves de los objetos, de modo que cada elemento de results.data representa una fila de datos cuyas claves son los nombres de las columnas. En un componente React, usa setRows(results.data) en complete y muestra las filas desde el estado; si los usuarios necesitan ver advertencias del análisis, presenta results.errors en la interfaz. FileReader es útil cuando necesitas el texto sin procesar y te encargarás de interpretar su formato. Papa Parse es una opción directa cuando necesitas convertir el contenido CSV en filas estructuradas.