0

I want my function "this.hid()" to be called when table is loaded in the webpart on page load

I have called "this.hid()" in the ComponentDidMount()

But my function is called before the table is loaded at the pageLoad Hid function is using the table's Data to filter the table

How can I call my function so that.. First my table is called and after that my function "hid()" is called

public componentDidMount() {
this.props.context.msGraphClientFactory.getClient().then((client: MSGraphClient): void => {
  client
    .api('me/planner/tasks')
    .version("v1.0")
    .select("*")
    .get((error: any, eventsResponse, rawResponse?: any) => {
      if (error) {
        console.error("message is :" + error);
        return;
      }
      const plannerTask: MicrosoftGraph.Event[] = eventsResponse.value;
      this.setState({ events: plannerTask  });

    })
})
this.hid()
 }

I have called the table in the render function

public render(): React.ReactElement<IReactTaskProps> {

return (
  <div className="cal">
    <div className="cal-heading"> All Tasks</div>
    <div >
      {<input type="text" id="myInput" onKeyUp={this.Myfunction} placeholder="Search for tasks.." 
    title="Type in a name"></input>}
      {<select id="mylist" onChange={this.dropDown} >
        <option value="">Select</option>
        <option value="In-Progress" >In-Progress</option>
        <option value="Not-Started">Not-Started</option>
        <option value="Completed" id="complete">Completed</option>
      </select>}

      <table className="table" id='SpfxDatatable'>

        <thead>
          <tr>
            <th>Task-Name</th>
            <th>Task-Status</th>
            <th>Start-Date</th>
            <th>End-Date</th>
            <th>Assigned-By</th>

          </tr>
        </thead>
        <tbody>

          {this.state.events.map((item, key) =>
            <tr >
              <td><a href={"https://tasks.office.com/credentinfotech.com/en- 
    GB/Home/Planner#/plantaskboard?planId=" + item.planId + "&taskId=" + item.id} target="_blank" > 
    {item.title}</a></td>
              <td id="status" td-value="">
                {(() => {
                  switch (item.percentComplete) {
                    case 0: return "Not-Started"
                    case 50: return "In-Progress";
                    case 100: return "Completed";
                  }
                })()}
              </td>
              <td>{moment(item.startDateTime).format('MM/DD/YYYY ')}</td>
              <td>{moment(item.dueDateTime).format('MM/DD/YYYY')}</td>
              <td>{(() => {
                switch (item.createdBy.user.id) {
                  case "5ae8709c-0825-4806-9dd4-2a7682bc409b": return "Abhishek Negi";
                  case "3c4d9bc8-aa11-410b-8133-8faff0aab157": return "Devvart Lamba";
                  case "6cfec030-4cef-447d-8bb5-69adc60dcb77": return "Shreya Singh";
                  case "5c1fb794-a16b-491f-8c23-5de2db3da403": return "Chhitij Sharma";
                  case "f02a3e4c-4f81-4bf0-a3e2-677c6d4567de": return "Sana Zubair";
                }
              })()}</td>


            </tr>

          )

          }</tbody>
          
      </table>
    </div>
    </div>
  
  
  );   
  
 }


 private hid(): any {
   var input, filter, table, tr, td, i, txtValue;

input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("SpfxDatatable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
  td = tr[i].getElementsByTagName("td")[1];
  if (td) {
    txtValue = td.textContent || td.innerText;

    if (txtValue == "Completed") {
      tr[i].style.display = "none";
    } else {
      tr[i].style.display = "";
    }
  }
  console.log(td)

}

 }

 private Myfunction(): any {
var input, filter, table, tr, td, i, txtValue;

input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("SpfxDatatable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
  td = tr[i].getElementsByTagName("td")[0];
  if (td) {
    txtValue = td.textContent || td.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }
  }
}

}