How to assign data values in array using ReactJS

Question

I am new to ReactJS I want to read the excel file and show data in the react project. To accomplish this I can successfully read data from excel file. Now, the problem is I was unable to display data on the react project. I've search this issue and find that array values are not defined like that...

Help me to display the data in the React project.

import React from 'react'
import { Table } from 'react-bootstrap'
import * as XLSX from 'xlsx'
import Accordion from './component/accordion'
import './App.css'

function App() {
  var items = [];
  
  const readExcel=(file) => {
    const promise = new Promise((resolve, reject)=>{
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(file);
      fileReader.onload=(e)=>{
        const bufferArray = e.target.result;
        const wb = {SheetNames:[], Sheets:{}};
        const ws1 = XLSX.read(bufferArray, {type:"buffer"}).Sheets.Sheet1;
        const ws2 = XLSX.read(bufferArray, {type:"buffer"}).Sheets.Sheet2;
        
        wb.SheetNames.push("Sheet1"); wb.Sheets["Sheet1"] = ws1;
        wb.SheetNames.push("Sheet2"); wb.Sheets["Sheet2"] = ws2;
     
        const data1 = XLSX.utils.sheet_to_json(ws1);
        const data2 = XLSX.utils.sheet_to_json(ws2);

        resolve([data1, data2]);
      };
      fileReader.onerror=(error) => {
        reject(error);
      };
    });
    promise.then((excelData) => {
      items.push(excelData);
      console.log(excelData);
    });
  };
  return(
    <div className="container-fluid">
      <section className="heading">
        <h4>Products Details</h4>
        <input type="file" className="input-field" onChange={(e) =>{
          const file=e.target.files[0];
          readExcel(file);
        }} />
      </section>
      {items.map((d) => (
        <Accordion 
          title={
            <div>
              <tr key={d.ID} className="btn-heading">
                <td>{d.ID}</td>
                <td>{d.Mail}</td>
                <td>{d.Name}</td>
                <td>{d.PhoneNo}</td>
                <td>{d.City}</td>
                <td>{d.Date}</td>
                <td>{d.Time}</td>
              </tr>
            </div>
          }
          content={
            <div>
              <p className="header">
                  <span className="header-content">Shipping Address:</span>
                  292 Naqshband Colony. Near rabbania Mosque. Multan
              </p>
              <Table size="sm">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Article No</th>
                    <th>Product Name</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Total Amount</th>
                  </tr>
                </thead>
                <tbody>
                  {items.map((c) =>(
                    <tr key={c.ArticleNo}>
                      <td>{c.ArticleNo}</td>
                      <td>{c.ProductName}</td>
                      <td>{c.Quantity}</td>
                      <td>{c.Price}</td>
                      <td>{c.TotalAmount}</td>
                    </tr>
                  ))}
                </tbody>
              </Table>
             </div>
          }
        />
      ))}
    </div>
  );
}
export default App;

Here is the codesandox: https://codesandbox.io/s/tender-tharp-30t8j?file=/src/App.js

Answer 1

Ok, I've tried it and got that error in the console

Here's what you need to do

• Move the key to the Accordion, (the component being mapped)
• Make sure your excel sheet headers match the key names you're using below

The key needs to be the component right inside of the map.

Also, the name Sheet1 should be the name of your sheet

{items.map((d) => (
        <Accordion   key={d.ID}   <-- move the key to here, 
          title={
            <div>
              <tr className="btn-heading">
                <td>{d.ID}</td>   <-- These values should exactly match *headers of your excel sheet 
                <td>{d.Mail}</td>
                <td>{d.Name}</td>
                <td>{d.PhoneNo}</td>
                <td>{d.City}</td>
                <td>{d.Date}</td>
                <td>{d.Time}</td>
              </tr>
            </div>
          }
....

If you're still having some trouble, please share an excel sheet with sample data.