Error: Element type is invalid

Dear all,

Representation of your work is great! I’m trying to use your library, but without success, thats why I need a help from you… I gett an 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.”. I have applied all the suggested steps of installation and appling from your part. Below is a part of my component’s code: <Table {...getTableProps()} > <Thead> { headerGroups.map(headerGroup => ( <Tr {...headerGroup.getHeaderGroupProps()}> { // Gives us access to each column headerGroup.headers.map( column => ( <Th {...column.getHeaderProps(column.getSortByToggleProps())}> {column.render('Header')} <span> {column.isSorted ? (column.isSortedDesc ? ' ▼' : ' ▲') : ''} </span> </Th> )) } </Tr> )) } </Thead> <Tbody {...getTableBodyProps()}> { page.map(row => { prepareRow(row) return( <Tr {...row.getRowProps()}> { row.cells.map( cell=> { return <Td {...cell.getCellProps()}>{cell.render('Cell')}</Td> }) } </Tr> ) }) } </Tbody> </Table>

[guissmejia]

I had the same error a few days ago, I also wanted to use both libraries, react-table for its ease of creating tables and react-super-responsive-table for the ease it gives for the responsive of the table.

I solved it by leaving the TR out of the .map that is made to headerGroups, being as follows:

Before:

<table {...getTableProps()}> <thead> {headerGroups.map((headerGroup) => ( <tr {...headerGroup.getHeaderGroupProps()}> {headerGroup.headers.map((column) => ( <th {...column.getHeaderProps()}>{column.render("Header")}</th> ))} </tr> ))} </thead> <tbody {...getTableBodyProps()}> {rows.map((row) => { prepareRow(row); return ( <tr {...row.getRowProps()}> {row.cells.map((cell) => { return ( <td {...cell.getCellProps()}>{cell.render("Cell")}</td> ); })} </tr> ); })} </tbody> </table>

After:

<Table {...getTableProps()}> <Thead> <Tr> {headerGroups.map((headerGroup) => headerGroup.headers.map((column) => ( <Th {...column.getHeaderProps()}>{column.render("Header")}</Th> )) )} </Tr> </Thead> <Tbody {...getTableBodyProps()}> {rows.map((row) => { prepareRow(row); return ( <Tr {...row.getRowProps()}> {row.cells.map((cell) => { return ( <Td {...cell.getCellProps()}>{cell.render("Cell")}</Td> ); })} </Tr> ); })} </Tbody> </Table>

I hope it can work for you.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.