How to convert CSV data into an array in React JS?

To convert CSV (Comma-Separated Values) data into an array in React, you can use the papaparse library. This library provides easy-to-use methods for parsing CSV data into various formats, including arrays. Here’s how you can do it:

Install the papaparse library:

npm install papaparse

Import and use the library in your React component:

import React, { useState } from 'react';
import Papa from 'papaparse';

function CSVToArrayConverter() {
  const [csvData, setCsvData] = useState('');
  const [dataArray, setDataArray] = useState([]);

  const handleCsvInputChange = (e) => {
    setCsvData(e.target.value);
  };

  const parseCSVToArray = () => {
    Papa.parse(csvData, {
      complete: (result) => {
        setDataArray(result.data);
      },
      header: false // Set this to true if your CSV has headers
    });
  };

  return (
    <div>
      <textarea
        value={csvData}
        onChange={handleCsvInputChange}
        placeholder="Paste CSV data here"
        rows={5}
        cols={50}
      />
      <button onClick={parseCSVToArray}>Convert</button>
      <pre>
        {dataArray.map((row, index) => (
          <div key={index}>{JSON.stringify(row)}</div>
        ))}
      </pre>
    </div>
  );
}

export default CSVToArrayConverter;

In this example, the CSVToArrayConverter component takes CSV data from a textarea, uses the Papa.parse() method from the papaparse library to parse the CSV data into an array (dataArray), and then displays the resulting array using the pre tag.

Replace the textarea and the data display with your own UI components as needed.

Keep in mind that the papaparse library also provides options for handling headers and other configuration settings. Adjust the configuration according to your CSV format.

Remember to handle errors and edge cases in a production scenario.