Why I Getting An Error That Says `table Is Null` Although I Can See The Data In The Table?

I am loading some data into a table in my React component. I am displaying the data using table from materialize CSS framework. I can see the data in the table. I am using a table

Solution 1:

So, as answered in the comment, the error you are receiving is because you are using the document.getElementById method to get your table, but you include the hash (#) sign, which is not necessary as the document.getElementById function expects a parameter that should match the id exactly, so it should theoretically be dataTable, nothing more, nothing less ;)

Now, I do say theoretically, and there is a good reason for that, namely, you seem to be using React, and you mix it with DOM manipulation. It is simply a bad idea to mix those two, as React works with a Virtual DOM which will re-render your data as soon as something on the state has changed. It will however not be notified when you start tinkering with the DOM, and as such interesting things can happen.

One thing is for sure, your sort method might possibly never work as intended, and to be honest, I wouldn't want to be the person who has to debug what goes wrong in such cases.

So let's go over your code a bit:

constructor(props) {
    super(props)
    window.info = [];
}

That is a very interesting start already, this tells me that this component can be used exactly once, as it seems to mix things with a global variable, though I have no idea why you would like to do that, I can tell you now already, you really shouldn't. At most, in the constructor you will find some initial state setting, maybe some method bindings to this, but that's it, don't manipulate global objects through a constructor!

render() {
    this.props.arr.result ? window.info.push(this.props.arr.result) : null

This makes it even more interesting, you are receiving some array through the props, and you seem to want to push them inside that global object we saw before, for reasons which really go beyond my imagination, and if it is not there, we are null. Such code lines deserve at least comments to the why, but preferably shouldn't be in there, as they don't make sense

var result = window.info.map(item => (
    <tbodykey={item.id}>

Good, you map here, and create the result set for later use. It should be noted that it would make more sense to map with the this.props.arr.result instead, and not with that interesting global variable...

//Sort function starts here.constsortTable = (n) => {

This method is well, where your error comes from, but please delete it, there is absolutely no reason to use such a sort algorithm, and don't manipulate the DOM outside of changing states or props, working with stores or reducers. This method should really not be in here. I also do not really want to look into deeper detail with this method, although it is the best commented piece of code in there, it should be deleted

return (
    <div><tableid="dataTable"className="responsive-table"><thead><tr><thonClick={() => sortTable(0)}>Account Name</th><th>Sessions</th><th>Bounces</th><th>Users</th></tr></thead>
            {result}
        </table></div>
)

This piece of code seems to be React :) A major point of critic would be the id attribute on table, it has no place in a React application. If you want to make your table internally callable, you could use the ref=((e) => this.table = e callback, so you might internally talk to the element you wish to track.

Please note that I do not only want to give you information about the technology you are using, no, I also want to give you another way of handling sorting and state and tables, in a more React way, so feel free to work your way through the following code. It shows how badly my favorite Belgian team is doing at the moment in the champions league, so I left the points out ;)

It has 2 presentational components (TableHeader, TableRow), and 1 container component (Table), which could/should be more, but I was rather interested in showing you how to work with initial state and managing sorting (though just basically handled)

constTableHeader = ({ columns, onClick, activeColname, isDescending }) => {
  
  return<thead>
    { columns.map( (col, key) => <thclassName={activeColname === col.name ? 'sort ' + (isDescending ? 'descending': 'ascending') : ''} key={`header${key}`} onClick={() => onClick( col )}>{col.title}</th> ) }
  </thead>;
};

constTableRow = ({ row, columns }) => {
  return<tr>
    { columns.map( (col, key) => <tdkey={`cell${key}`}>{ row[col.name] }</td> ) }
  </tr>;
};

classTableextendsReact.Component {
  constructor() {
    super();
    this.state = {
      order: null
    };
  }
  columnClicked( column ) {
    console.log('got clicked ', column);
    let { order } = this.state;
    this.setState({
      order: {
        name: column.name,
        descending: order && order.name === column.name && !order.descending
      }
    });
  }
  render() {
    let { columns, rows } = this.props;
    let { order } = this.state;
    if (order) {
      // sort, if necessarylet { name, descending } = order;
      console.log(`ordering by ${name} in ${descending}`);
      rows = [...rows].sort( (a, b) => (a[name] > b[name] ? 1 : -1) * (descending ? -1 : 1) );
    }
    return<table><TableHeadercolumns={columns}activeColname={order && order.name} isDescending={order && order.descending} onClick={(...args) => this.columnClicked(...args)} />
      <tbody>
      { rows.map( (row, key) => <TableRowrow={row}columns={columns}key={row.id} /> ) }
      </tbody></table>;
  }
};

const columns = [
  { title: 'Team', name: 'team' },
  { title: 'Played', name: 'played' },
  { title: 'Won', name: 'won' },
  { title: 'Equal', name: 'equal' },
  { title: 'Lost', name: 'lost' }
];

const data = [
  { id: 0, team: 'PSG', played: 4, won: 4, equal: 0, lost: 0 },
  { id: 1, team: 'Bayern munchen', played: 4, won: 3, equal: 0, lost: 1 },
  { id: 2, team: 'Celtic Glasgow', played: 4, won: 1, equal: 0, lost: 3 },
  { id: 3, team: 'RSCA Anderlecht', played: 4, won: 0, equal: 0, lost: 4 }
];

ReactDOM.render( <Tablecolumns={columns}rows={data} />, document.querySelector('#app') );

.sort {
  text-decoration: underline;
}
.ascending::after {
  content: '▲';
}
.descending::after {
  content: '▼';
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><divid="app"></div>

I added some links to the React documentation, I really do hope you take some time to read through them ;)