2

I even tried import {Table} from 'reactstrap'; i.e with the curly braces. When used with the curly braces data is coming but not as a table. My reactstrap is also of the latest version. This is the error being shown: Attempted import error: 'reactstrap' does not contain a default export (imported as 'Table'). This is my Assignment.js. 

import Table from 'reactstrap';

class Assignment extends Component{

  render(){
      return(

     <Table dark>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </Table>

      )
  }
}

export default Assignment;`

Joann Elza
  • 21
  • 1
  • 2
  • A 5 second google search shows from the [docs](https://reactstrap.github.io/components/tables/) that it should be imported as `import { Table } from 'reactstrap';`. If you attempted that like you say, you would have either seen it work, or gotten a different error. – Brian Thompson Jun 02 '20 at 19:17
  • [Read here](https://stackoverflow.com/questions/31096597/using-brackets-with-javascript-import-syntax) about the differences between named and default imports. – Brian Thompson Jun 02 '20 at 19:20
  • Does this answer your question? [using brackets with javascript import syntax](https://stackoverflow.com/questions/31096597/using-brackets-with-javascript-import-syntax) – Brian Thompson Jun 02 '20 at 19:21
  • Ya the error is gone but table is still not there. Just the data. I got it it was an isssue with bootstrap. Thank you so much – Joann Elza Jun 02 '20 at 19:43

1 Answers1

4

https://reactstrap.github.io/?path=/docs/home-upgrading--page

Removed components

InputGroupAddon: This in no longer needed in Bootstrap 5, you can now add Buttons, Inputs directly to InputGroups in the order you wish.

InputGroupButtonDropdown: This can now be replaced with a regular Dropdown component.

CustomInput: These are no longer needed in Bootstrap 5, since all form inputs will be styled by Bootstrap instead of browser default. The existing Input component now supports file, select, switch, and range types.

Jumbotron: Jumbotrons have been removed from Bootstrap 5, can be replaced with <div class="rounded px-3 px-sm-4 py-3 py-sm-5">. Jumbotron fluid can be replaced with <div class="bg-light mb-4 py-3 py-sm-5">.

Components with breaking changes

Tooltip/Popover/DropdownMenu: The modifiers prop will now conform to the new popper2 modifiers, which take an array instead of an object. offset prop is now an array of 2 numbers that represent skidding and distance.

ModalHeader/ToastHeader: Bootstrap 5 no longer supports custom close icons, so this feature was removed from ModalHeader and ToastHeader.

Dropdown/DropdownMenu: The left and right properties are deprecated, but still supported for backwards compatibility. Now replaced with start and end in Bootstrap 5.

Zahir Masoodi
  • 546
  • 7
  • 23