title: How to use Datatable in Reactjs when the data from API
body: <p>I already parsing API using <code>axios</code>. After that I got the value then I adding to properties <code>Data</code> in Datatable but still not working. The value not parse to <code>Datatable</code>. When I <code>console.log</code> the data is showing. I am use API from <code>https://jsonplaceholder.typicode.com/users</code>.</p>
  <p>And hear is my code:</p>
  <pre><code>import &quot;./css/jquery.dataTables.css&quot;;
  import React, { Component } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  const $ = require(&quot;jquery&quot;);
  $.Datatable = require(&quot;datatables.net&quot;);
  
  
  export default class Tbl extends Component {
       constructor(props) {
           super(props);
           this.state = {
               users: [],
               loading: true,
           };
       }
  
       //option 1
       async getUsersData() {
           const res = await axios.get(&quot;https://jsonplaceholder.typicode.com/users&quot;);
           console.log(res.data);
           this.setState({ loading: false, users: res.data });
       }
  
      //option 2
       async getUsersData1() {
           const res = await axios.get(&quot;https://jsonplaceholder.typicode.com/users&quot;);
           return res.data;
       }
  
       componentDidMount() {
          //call option 1
          this.getUsersData();
  
           this.$el = $(this.el);
           this.$el.DataTable({
               data: this.state.users, //option 1
               data: this.getUsersData1(), //option 2
               columns: [
                   { title: &quot;Name&quot;, data: &quot;name&quot; },
                   { title: &quot;Username&quot;, data: &quot;username&quot; },
                   { title: &quot;Email&quot;, data: &quot;email&quot; },
                   { title: &quot;Phone&quot;, data: &quot;phone&quot; },
                   { title: &quot;Website&quot;, data: &quot;website&quot; }
               ],
           });
       }
  
       componentWillMount() {}
  
       render() {
           return (
               &lt;table className=&quot;display&quot; width=&quot;100%&quot;
                   ref={(el) =&gt; (this.el = el)}&gt;
               &lt;/table&gt;
           );
       }
  }
  </code></pre>
  <p>I already try for option 1 and option 2 but still not working.</p>
  <p>Thank,</p>