CODEWITHSUNDEEP
javascripthtmlreactjsecmascript-6
codyc4321
codyc4321

Reputation: 9672

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements)...; using fixed-data-table CDN

I have a React app that is getting errors

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of BasicDataTableExample.

and

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of BasicDataTableExample.

I'm at the Create your Columns section of https://facebook.github.io/fixed-data-table/getting-started.html

The difference is I'm using a cdn, and they use

const {Table, Column, Cell} = require('fixed-data-table');

instead.

I try unpacking like const Table = FixedDataTable.Table;, which seems to work when I went into debugger, but the app is broken. It looks like:

<!DOCTYPE html>
<html>
  
    <head>
        <title>data-table-basic</title>
        <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-beta.3/react-router.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.min.css" rel="stylesheet">
    <head>

      
    <body>
            <a class="nav-link" href="/clock">clock</a>
            <a class="nav-link" href="/counter">counter</a>
            <a class="nav-link" href="/data-table-basic">data-table-basic</a>
            <a class="nav-link" href="/query-params-react-router">query-params-react-router</a>
            <a class="nav-link" href="/todo-list">todo-list</a>
            <a class="nav-link" href="/validated-form">validated-form</a>



        <div id="entry"></div>
        <div id="code"></div>

<script type="text/babel">
var destination = document.querySelector("#entry");
            
const Table = FixedDataTable.Table;
const Column = FixedDataTable.Column;
const Cell = FixedDataTable.cell;


class BasicDataTableExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      myTableData: [
        {name: 'Rylan'},
        {name: 'Amelia'},
        {name: 'Estevan'},
        {name: 'Florence'},
        {name: 'Tressa'},
      ],
    };
  }

  render() {
    return (
      <Table
        rowsCount={this.state.myTableData.length}
        rowHeight={50}
        headerHeight={50}
        width={1000}
        height={500}>
        <Column
          header={<Cell>Name</Cell>}
          cell={props => (
            <Cell {...props}>
              {this.state.myTableData[props.rowIndex].name}
            </Cell>
          )}
          width={200}
        />
      </Table>
    );
  }
}

ReactDOM.render(
    <div>
        <BasicDataTableExample/>
    </div>,
    destination
)

        </script>
    </body>
  
</html>

How do I make the Table, Column, and Cell show up correctly like they did using cdn?

Upvotes: 0

Views: 194

Answers (3)

Arun Kumar Mohan
Arun Kumar Mohan

Reputation: 11915

Timo is right. But instead of 

const Table = FixedDataTable.Table;
const Column = FixedDataTable.Column;
const Cell = FixedDataTable.Cell;

you could destructure the components when importing the module using

import {Table, Column, Cell} from 'fixed-data-table';

Less keystrokes.

MDN docs on import

Upvotes: 0

Mike
Mike

Reputation: 787

If you are using CDN then wrap your function into IIFE:

(function() {
    //your code will be executed after window load
})();

Upvotes: 0

TimoStaudinger
TimoStaudinger

Reputation: 42460

The issue here is likely that Cell is undefined, as you are trying to retrieve it as

const Cell = FixedDataTable.cell;

, while the property starts with an upper case C:

const Cell = FixedDataTable.Cell;

Upvotes: 1

Related Questions