Datatable functions are not working with Reactjs

Question

I'm using Datatable Library to draw table easily.

And I got a data with Fetch API and render to table and It works well. But I don't know why DataTable Funcions like sorting, searching, showing options.

As you see, get data from API and render to HTML are works well, but when I click sort or search function it changes to this.

Also Another functions like interval the data from API every 10 seconds and render to table are works well.

It seems that there are some problem in initial state.

import React, { Component } from 'react';
import './PostContainer.css';

class PostContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: {
        status: '0000',
        data: {
          loading: { sell_price: 'loading', volume_7day: 'loading' },
        },
      },
    };
  }
  async componentDidMount() {
    this.getData();
    this.interval = setInterval(() => {
      this.getData();
    }, 10000);
  }

  getData() {
    fetch('https://api.bithumb.com/public/ticker/all')
      .then(res => {
        const data = res.json();
        return data;
      })
      .then(res => {
        this.setState({
          tableData: res,
        });
      })
      .catch(error => {
        console.error(error);
      });
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    let data = this.state.tableData;
    let chart = [];
    console.log(data);
    if (data.status === '0000') {
      delete data.data['date'];
      for (let [key, value] of Object.entries(data.data)) {
        chart.push(
          <tr key={key}>
            <td>{key}</td>
            <td>{value.sell_price}</td>
            <td>{value.volume_7day}</td>
          </tr>
        );
      }
    } else if (
      data.status === '5500' ||
      data.status === '5600' ||
      data.status === '5900'
    ) {
      this.setState({
        tableData: {
          data: {
            ERROR: {
              sell_price: 'ERROR with API',
              volume_7day: 'ERROR with API',
            },
          },
        },
      });
    }
    return (
      <div className="Post">
        <table id="table" className="table table-striped table-bordered">
          <thead>
            <tr>
              <th>Coin Name</th>
              <th>Current Price</th>
              <th>Volume</th>
            </tr>
          </thead>
          <tbody>{chart}</tbody>
        </table>
      </div>
    );
  }
}

export default PostContainer;

Can access to DEMO directly. I uploaded to Github Pages.

Answer 1

I can think of 2 issue to look for

a.

If you see in screenshot there is no Pagination.

When I try load DEMO with Developer Console open.

It works fine and you will see Pagination which will show 10 record at a time.

Check your code for Datatable initialization code in index.js

$('#table').DataTable({
    order: [[1, 'desc']],
});

Make sure above code is called after Data is loaded in HTML

b.

Your state value is not updated to actual values while sorting

 tableData: {
        status: "0000",
        data: {
            loading: {
                sell_price: "loading",
                volume_7day: "loading"
            }
        }
    }