Importing specific data columns from excel and displaying in Reach Application

Question

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.

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:

Please help. Thanks

Chuck · Accepted Answer · 2021-08-24 09:50:11Z

1

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

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

answered Aug 24, 2021 at 9:50

Chuck

8147 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jennifer Over a year ago

Hi @sirius . Many many thanks. It works for me now. Just a quick question. How can I pick only specific fields from the excel sheet? based on the column headers ?

Chuck Over a year ago

If you what you really want is to display specific fields, then you can use custom renderers. github.com/nadbm/react-datasheet#custom-renderers

Jennifer Over a year ago

Thanks Sirius . Really appreciated your help. I will try this custom-renderers.

Collectives™ on Stack Overflow

Importing specific data columns from excel and displaying in Reach Application

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related