Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

user_13193321 0
Viewed 1863

i was trying the basic example of react-tables, and i got this error "Error: 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." whereas I have exported the component. here is my code 

import React, { Component } from 'react';  
import ReactTable from "react-table";  

const data = [{
    name: 'Ayaan',
    age: 26
}, {
    name: 'Ahana',
    age: 22
}, {
    name: 'Peter',
    age: 40
}, {
    name: 'Virat',
    age: 30
}, {
    name: 'Rohit',
    age: 32
}, {
    name: 'Dhoni',
    age: 37
}]

const columns = [{
    Header: 'Name',
    accessor: 'name'
}, {
    Header: 'Age',
    accessor: 'age'
}]

export default class TableTry extends Component {  
    render() {  
        return (  
            <div>  
                <ReactTable  
                    data={data}  
                    columns={columns}  

                />  
            </div>        
        )       
    }  
}

and here are the version details:

"react": "^16.13.1",
"react-table": "^7.0.4"
react-data-table-component react-table reactjs datatables javascript
1 Answers

import ReactTable from "react-table"; is for version 6 of react-table, version 7 is not supported. You can use react-table-6

import React from "react";
import "./styles.css";
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";
const data = [
  {
    name: "Ayaan",
    age: 26
  },
  {
    name: "Ahana",
    age: 22
  },
  {
    name: "Peter",
    age: 40
  },
  {
    name: "Virat",
    age: 30
  },
  {
    name: "Rohit",
    age: 32
  },
  {
    name: "Dhoni",
    age: 37
  }
];
const columns = [
  {
    Header: "Name",
    accessor: "name"
  },
  {
    Header: "Age",
    accessor: "age"
  }
];

export default function App() {
  return (
    <div className="App">
      <ReactTable data={data} columns={columns} />
    </div>
  );
}

check here CodeSandBox

user_116030040
Related