Clicking on sort, removes data from datatable. Reactjs Javascript

Question

I am using datatable in react. When i click on sorting (in tHead) it removes all data and says no data available in table

What i think here, is that tbody is being rendered before Datatable initialisation. Or something like that.

Here is my code in PasteBin

And here is some code of componentDidMount

componentDidMount(){
        employessData = thisclass.props.data;

        thisclass.setState({
            stateReady: true
        })
        var self = this;
        $('#mytableEmp').dataTable({
            "columnDefs": [
                { "width": "20px", "targets": 0 }
            ],
            "pagingType": "numbers",
            "bAutoWidth": false,
            "bDestroy": true,       
            "fnDrawCallback": function() {              
                self.forceUpdate();         
            }
        });
        $('#checkboxhead').removeAttr('area-sort').removeClass('sorting_asc');
        $(".checkAllCBEmp").click(function () {
            $('#mytableEmp tbody input[type="checkbox"]').prop('checked', this.checked);
        });

        $("#searchtabletb").on("keyup", function() {
            var value = $(this).val();
            value = value.toLowerCase();
            console.log(value);
            $("#mytableEmp tr").each(function(index) {
                if (index != 0) {
                    var row = $(this);

                    var id = row.find("td").text();
                    id = id.toLowerCase();
                    if (id.indexOf(value) === -1) {
                        $(this).hide();
                    }
                    else {
                        $(this).show();
                    }
                }
            });
        });
}

And here is code from render function.

  render () {

    return (


                <table className="table table-stripped" id="mytableEmp">
                  <thead>
                    <tr className="table-head-row">
                      <th id="checkboxhead" className="firsttd">
                        <div className="round-cb">
                            <input type="checkbox" id="cb1_emp" className="checkAllCBEmp" />
                            <label htmlFor="cb1_emp"></label>
                        </div>
                      </th>
                      <th>Title</th>
                      <th>Type</th>
                      <th>Created on</th>
                      <th>From</th>
                      <th>To</th>
                      <th>Processed</th>
                      <th>Amount</th>
                      <th>Status</th>
                      <th id="detailarrowhead" className="lasttd"></th>
                    </tr>
                  </thead>
                  <tbody>
                  {
                    this.state.stateReady ? 
                        employessData.map((heading, index) => {
                        return(<tr role="row" className="tablerow" key={index}>
                          <td className="firsttd">
                            <div className="round-cb">
                                <input type="checkbox" value="cb1" id={heading.userId} />
                                <label htmlFor={heading.userId}></label>
                            </div>
                          </td>
                          <td>

                            <div className="emp-avatar">
                                <img src={heading.profile_picture} />
                            </div>

                            <div className="emp-title-div">
                             <div className="emp-title">
                               <div>
                                 {heading.name}
                               </div>
                             </div>
                           </div>
                          </td>
                          <td>c</td>
                          <td>Texto 2</td>
                          <td>Texto 2</td>
                          <td>Texto 2</td>
                          <td>Texto 2</td>
                          <td>Texto 2</td>
                          <td><span className="badge badge-red">Rejected</span></td>
                          <td className="lasttd"><Link to="/emp-profile" className="table-details-btn" onClick={() => {this.addlocalid(heading.userId)}}>View User</Link></td>
                        </tr>)
                    })
                    :
                    ""
                  }
                  /tbody>
                </table>

    )
  }

Answer 1

The scope of employessData is weird, so it thisclass.

You will want to do this instead in render:

let employessData = this.props.data;
this.state.stateReady ? 
    employessData.map(...);

and then understand if/why this.props.data that this component receives is empty (which is not visible here).

Answer 2

I have resolved this issue for the time being.

I have added delay of 3 seconds in following function

setTimeout(function(){    
$('#mytableEmp').dataTable({
                "columnDefs": [
                    { "width": "20px", "targets": 0 }
                ],
                "pagingType": "numbers",
                "bAutoWidth": false,
                "bDestroy": true,       
                "fnDrawCallback": function() {              
                    self.forceUpdate();         
                }
            });
}, 3000);