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.

I would suggest you to use the DataTable component made to be used with react to avoid and reinventing the wheel. Please refer this link: Datatable react component — AshishAgrahari
– AshishAgrahari, Commented Jun 18, 2019 at 6:56
@AshishAgrahari Thanks I change my component that suggested! :) — writingdeveloper
– writingdeveloper, Commented Jun 25, 2019 at 6:23

MyTwoCents · Accepted Answer · 2019-06-18 06:48:20Z

2

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"
            }
        }
    }

answered Jun 18, 2019 at 6:48

MyTwoCents

7,6723 gold badges28 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Datatable functions are not working with Reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related