I
I
Igor Braduloff2019-01-04 17:43:48
React
Igor Braduloff, 2019-01-04 17:43:48

Why does an error occur when exporting to Excel?

Good afternoon! I'm new to React and ran into a problem with exporting data to Excel. I'm using the react-data-export plugin.
My code is below:

import React, { Component } from 'react';
import './App.css';
import Form from "./Form";
import {ExcelFile, ExcelSheet} from "react-data-export";
const multiDataSet = [
    {
        columns: ["Name", "Salary", "Sex"],
        data: [
            ["Johnson", 30000, "Male"],
            ["Monika", 355000, "Female"],
            ["Konstantina", 20000, "Female"],
            ["John", 250000, "Male"],
            ["Josef", 450500, "Male"],
        ]
    },
    {
        xSteps: 1, // Will start putting cell with 1 empty cell on left most
        ySteps: 5, //will put space of 5 rows,
        columns: ["Name", "Department"],
        data: [
            ["Johnson", "Finance"],
            ["Monika", "IT"],
            ["Konstantina", "IT Billing"],
            ["John", "HR"],
            ["Josef", "Testing"],
        ]
    }
];
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Form>
          </Form>
            <ExcelFile>
                <ExcelSheet dataSet={multiDataSet} name="Organization"/>
            </ExcelFile>
        </header>
      </div>
    );
  }
}
export default App;

The error is:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `App`.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Anton Spirin, 2019-01-04
@pandinus

Judging by the example in the library repository, ExcelSheet is a property of ExcelFile and is not directly exported from the module.

import ReactExport from "react-data-export";

const { ExcelFile } = ReactExport;
const { ExcelSheet } = ExcelFile;

Or don't export Form.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question