React- Change checkbox to be unchecked dynamically

Question

So, I have this table with these checkboxes. When I click on "Add Entries" the right modal is being opened. When I click on "Done", the checkboxes should become unchecked without refreshing the page. Can you please advise me with a solution?

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

This is the function that it's content is the input checkbox

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

    checkboxStatus=()=> `this one is a validation of the checkbox clicks and it works as needed`
    {
        `I want to change the checkboxes status in here`
    }

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);
            }
     }

  sendForm = () => {
        this.toggleModal(); `Closing the Modal Window`
        this.addNewNetworks() ` Not important function`

        this.checkboxStatus(); `the above function`
      }

render (){

  return (
<Table striped bordered hover> `the table component`
                        <thead>
                        <tr>
                        <th>#</th>
                        <th>App</th>
                        </tr>
                        </thead>
                        <tbody>

Input checkbox in "chooseAppSelector"

                        {this.chooseAppSelector()}
                        </tbody>
                        </Table>

`divs....`
)

Thanks in advance!!

Pass a callback that clears the checkboxes to the modal. When the user clicks Done, you invoke the callback before/after doing the other things. — hellogoodnight
– hellogoodnight, Commented Jan 14, 2020 at 14:15
In your checkboxStatus function. Return an event and add it to your checkboxes like this: <input type="checkbox" checked={this.state.checked} onChange={this.onChangeAction.bind(this)} /> where this.state.checked = false. then call it at an appropriate time. — Joel
– Joel, Commented Jan 14, 2020 at 14:15

Babak Yaghoobi · Accepted Answer · 2020-01-14 14:29:27Z

1

in your Done onClick handler add this 2 line :

handleDone=()=>{

   var clist=document.getElementsByClassName("appsCheckbox");
   for (var i = 0; i < clist.length; ++i) { clist[i].checked = false }

}

answered Jan 14, 2020 at 14:29

Babak Yaghoobi

1,99510 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

React- Change checkbox to be unchecked dynamically

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