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 =[0];

    //just pass the fileObj as parameter
    ExcelRenderer(fileObj, (err, resp) => {
          cols: resp.cols,
          rows: resp.rows


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


export default ConvertToJson;

I am getting the below error: enter image description here

Please help. Thanks


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

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