Importing specific data columns from excel and displaying in Reach Application

I am new to react and need help with one of the problem. My requirement is to get specific columns data from an excel sheet and display it on the browser. For that, I am using the react-excel-renderer library. The library is here

I have installed the library.

I have installed the library

And here is my component:

import React, { Component } from "react";
import {OutTable, ExcelRenderer} from 'react-excel-renderer';

class ConvertToJson extends Component {

fileHandler = (event) => {
    let fileObj = event.target.files[0];

    //just pass the fileObj as parameter
    ExcelRenderer(fileObj, (err, resp) => {
      if(err){
        console.log(err);            
      }
      else{
        this.setState({
          cols: resp.cols,
          rows: resp.rows
        });
      }
    });               

  }

render() {
  return (
        <div>
            <input type="file" onChange={this.fileHandler.bind(this)} style={{"padding":"10px"}} />
    
            <OutTable data={this.state.rows} columns={this.state.cols} tableClassName="ExcelTable2007" tableHeaderRowClass="heading" />

            </div>
    );
    }
}

export default ConvertToJson;

I am getting the below error: enter image description here

Please help. Thanks

Answer

The problem is that you did not initialized state in your component. Put this line before fileHandler definition.

this.state = {
    rows: [],
    cols: []
}