How to push the elements into array?

Question

In the UI i am having checkboxes for particular operation.

<input type="checkbox" className="form-check-input" name="Dashboard" 
   value="Read" onChange={this.get_permission.bind(this)}/>
<input type="checkbox" className="form-check-input" name="Dashboard" 
  value="Create" onChange={this.get_permission.bind(this)}/>
<input type="checkbox" className="form-check-input" name="Dashboard" 
 value="Update" onChange={this.get_permission.bind(this)}/><input 
 type="checkbox" className="form-check-input" name="Dashboard" 
value="Delete" onChange={this.get_permission.bind(this)}/>

OnChange function:

get_permission(event){
    var permissions = this.state.permissions
    if(event.target.checked){
        permissions.push({
            "module_name": event.target.name,
            "permissions": [event.target.value]
        })
    }
    else{
        for(var i=0;i<permissions.length;i++){
            if(permissions[i].module_name == event.target.name){
                if(permissions[i].permissions == event.target.value){
                    permissions.splice(i,1)
                    break
                }
            }
        }
    }
    console.log('permissions',permissions)
    this.setState({permissions : permissions})
}

From the above code I can able to sent in the below attached format

But I need to pass in the below format

Answer 1

When the permission is already existing, you have to update the permissions for that . your code is not doing that

Update your code to the following

function get_permission(event) {
    const permissions = this.state.permissions.splice(); //If ES6 use [...this.state.permissions]
    const permission = permissions.find(item => item.module_name === permission);

    if (event.target.checked) {
        if (permission) {
            permission.permissions.push(event.target.value);
        } else {
            permissions.push({
                "module_name": event.target.name,
                "permissions": [event.target.value]
            })
        }
    }
    else {
        for (let i = 0; i < permission.permissions.length; i++) {
            if (permission.permissions[i] === event.target.value) {
                permission.permissions.splice(i, 1);
                break;
            }
        }
    }
    console.log('permissions', permissions);
}

Answer 2

Sorry, I don't have enough reputation to comment. But, I think you should optimize your state structure to the below. You're using permissions so many times in the structure. It's just misleading.

{
    modules: [{
        moduleName: "Dashboard",
        permissions: {
            read: false,
            create: false,
            update: false,
            delete: false
        },
    }]
}

Also, I'd advise you to render checkboxes and the table the react way instead of hardcoding the elements and also convert your functions to es6 format. You can simplify your code a lot and it might even result in better performance and better understanding of the code.