Comment lire des fichiers CSV à l’aide des composants fonctionnels de React ?

Vous êtes-vous déjà demandé s'il était possible de créer un code capable d'ouvrir et de lire un fichier .csv en utilisant React ? Je parie que la réponse est oui. Et si vous y avez pensé, mais que vous n'avez pas essayé de le faire, c'est le moment de le faire. Dans ce tutoriel, vous verrez comment lire des fichiers CSV à l’aide des composants fonctionnels de React.

Le fichier CSV est un fichier de valeurs séparées par des virgules. Il s'agit d'un format courant pour stocker des données tabulaires, et il est pris en charge par de nombreuses applications.

Étape 1

Tout d'abord, nous devons créer un composant fonctionnel. Cela nous aidera à mieux comprendre comment les données circulent dans notre application.

Ensuite, nous devons créer des variables d'état. C'est là que nous allons stocker les données que nous envoyons depuis notre composant fonctionnel. Les variables d'état ne changent pas lorsque l'utilisateur interagit avec notre application.

const CsvReader = () => {
  // save the input file name to a state variable
  const [csvFile, setCsvFile] = useState(null);
  // save the file data to a state variable
  // so the DisplayTable component can use it
  const [csvArray, setCsvArray] = useState([]);
}

Étape 2

Pour la plupart du temps, chaque ligne d’un fichier CSV est séparée par un caractère de retour à la ligne. Vous devez donc l’enlever. Vous pouvez utiliser la fonction map pour remplacer les virgules par des espaces. Appelez ensuite serCsvArray. Ensuite, coder une fonction pour gérer les téléchargements des fichiers.

const handleFileUpload = () => {
    const file = csvFile;
    const reader = new FileReader();

    reader.onload = function (e) {
      const text = e.target.result;
      processCSV(text);
    };

    reader.readAsText(file);
  };

Étape 3

Tout d'abord, créons un composant fonctionnel. Ce sera le composant que nous utiliserons pour générer notre vue de table. Il acceptera un fichier de l'utilisateur et renverra un type d'entrée = file et acceptera = .csv.

En plus de cela, nous voulons ajouter un bouton onClick qui permettra à l'utilisateur de convertir ses données en tableau.

return (
    <div>
      <input
        type="file"
        accept=".csv"
        onChange={(e) => {
          setCsvFile(e.target.files[0]);
        }}
      />
      <button
        onClick={(e) => {
          e.preventDefault();
          handleFileUpload();
        }}
      >
        Submit
      </button>
      <br />
      <DisplayTable value={csvArray} />
    </div>
  );
};

export default CsvReader;

Le code final doit ressembler à ça :  

import React from "react";
import { useState } from "react";
import DisplayTable from "./DisplayTable";

const CsvReader = () => {
  // save the input file name to a state variable
  const [csvFile, setCsvFile] = useState(null);
  // save the file data to a state variable
  // so the DisplayTable component can use it
  const [csvArray, setCsvArray] = useState([]);

  const processCSV = (str) => {
    // split the file data into rows from the newline character
    let rows = str.split("\n");

    // remove comma
    rows = rows.map(function (row) {
      return row.replace(/,/g, " ");
    });
    setCsvArray(rows);
  };

  const handleFileUpload = () => {
    const file = csvFile;
    const reader = new FileReader();

    reader.onload = function (e) {
      const text = e.target.result;
      processCSV(text);
    };

    reader.readAsText(file);
  };

  return (
    <div>
      <input
        type="file"
        accept=".csv"
        onChange={(e) => {
          setCsvFile(e.target.files[0]);
        }}
      />
      <button
        onClick={(e) => {
          e.preventDefault();
          handleFileUpload();
        }}
      >
        Submit
      </button>
      <br />
      <DisplayTable value={csvArray} />
    </div>
  );
};

export default CsvReader;

Vous en avez assez d'apprendre React dans un livre, pour vous rendre compte que la matière n'est pas vraiment assimilée ?

Nous avons la solution pour vous. Vous voyez, nous pensons que la meilleure façon d'apprendre est d'agir. Et nous pensons que c'est particulièrement vrai lorsqu'il s'agit de React, un framework réputé pour être difficile à comprendre.

C'est pourquoi nous avons créé ce cours : Il s'agit d'une approche pratique de l'apprentissage de React. Vous utiliserez des projets réels, écrits en JavaScript et React, pour mettre en pratique vos compétences en tant que développeur. Envie d’en savoir plus visiter notre plateforme.