error while importing data from excel file to react

Question

I am working in xlsx file to import data from excel file to react project. But I found an error of

App.js:17 Uncaught TypeError: wb.Sheets is not a function
    at fileReader.onload (App.js:17:1)

I am unable to find the error. I used the xlsx package to import data. the code is

import logo from './logo.svg';
import './App.css';
import * as XLSX from 'xlsx'
function App() {
  const readExcel = async(file) => {
    try {
      const promise = await new Promise((resolve, reject) => {
        const fileReader = new FileReader()
        fileReader.readAsArrayBuffer(file)
        fileReader.onload = (e) => {
          const bufferReader = e.target.result
          const wb = XLSX.read(bufferReader, { type: 'buffer' });
          const wbSheetName = wb.SheetNames[0]
          const ws = wb.Sheets(wbSheetName);
          const data = XLSX.utils.sheet_add_json(ws)
          resolve(data)
        };
        FileReader.onError = (error) => {
          reject(error)
        }
      })
      promise.then((d) => {
        console.log(d)
      })
    } catch (error) {
      console.log(error)
    }
  }
  return (
    <div className="App">
      <input type='file' onChange={(e) => {
        const file = e.target.files[0];
        readExcel(file)
      }} />
    </div>
  );
}
export default App;

Kindly tell me the solution of this problem.

Answer 1

I think you have done few mistakes.

wb.Sheets(wbSheetName); => wb.Sheets[wbSheetName];

XLSX.utils.sheet_add_json(ws) => XLSX.utils.sheet_to_json(ws);

See the example below

// Get a hook function
const {useState} = React;

const App = () => {
 
  const readExcel = (file) => {
     try{
      return new Promise((resolve,reject) => {
        const fileReader = new FileReader();
        fileReader.readAsArrayBuffer(file);
        fileReader.onload = (e) => {
            const bufferReader = e.target.result;
            const wb = XLSX.read(bufferReader, { type: "buffer" });
            const wbSheetName = wb.SheetNames[0];
            const ws = wb.Sheets[wbSheetName];
            const data = XLSX.utils.sheet_to_json(ws);
            console.log(data);
            resolve(data);
        };
        FileReader.onError = (error) => {
          reject(error);
        };
      })
     }catch(error) {
        console.log(error)
     }  
  }
  
  return (
    <div>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input
        type="file"
        onChange={(e) => {
          const file = e.target.files[0];
          readExcel(file);
        }}
      />
    </div>
  );
}


// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>