reactjs - change table with checkboxes to "Select" with checkboxes- React.JS

Question

So, I have this checkbox table which reflects applications names I'm pulling with axios function:

Please see the component code:

class Home extends Component {
 selectedApps=[];
 selectedAppsObjArr=[];
state={
        appList:[],
}

 chooseAppSelector=()=>
     {
        let appSelectorArray=[];
        for (let application of this.state.appList)
        {
        appSelectorArray.push(

            <tr>
            <th scope="row"><input type="checkbox" className={"appsCheckbox"}  id={"appSelectorCheckbox"+application.id} onClick={()=>this.checkCheckbox(application.id, application)}/></th> 
            <td>{application.product}</td>
            </tr>
        )
        }
        return appSelectorArray;
     }

The checkboxes validation functions:

checkCheckbox=(appId, application)=>
     {
        let contains=this.selectedApps.includes(appId)
        if (contains==false)
            {
                this.selectedApps.push(appId)
                this.selectedAppsObjArr.push(application)
            }
            else
            {
                let index=this.selectedApps.indexOf(appId);
                this.selectedApps.splice(index,1);
                let index2=this.selectedAppsObjArr.indexOf(appId)
                this.selectedAppsObjArr.splice(index2,1);
            }
     }

    **//CLEARS THE CHECKBOXES AFTER CLOSING THE MODAL**
    handleDone=()=>{

        var clist=document.getElementsByClassName("appsCheckbox");
        for (var i = 0; i < clist.length; ++i) 
        { clist[i].checked = false }
     }
     **//CLEARS THE CHECKBOXES AFTER CLOSING THE MODAL**

render (){

  return (
<Table striped bordered hover> **//Bootstrap component **
                        <thead>
                        <tr>
                        <th>#</th>
                        <th>App</th>
                        </tr>
                        </thead>
                        <tbody>
                        {this.chooseAppSelector()} **// the table content is being created in here**
                        </tbody>
                        </Table>

)
}

}

So, I need it to be changed to a selector with checkboxes like this one:

Or like this one:

Or any other selector with checkboxes :)

I would really appreciate your help, as I'm not really familiar with react and I'm trying to create it for like 4 days :)

Many thanks in advance!!!

标签： reactjs