How to make some checkboxes checked, based on an array of checked values React JS, Inertia JS-CodePudding

I am working on a React JS with Inertia JS combined application. I'm in the progress to finish my edit feature. so I need to make some checkboxes to be checked default based on a set of values in an array.

I loop the checkbox to let the user choose the list of permissions and some of them should be already checked based on the data from the array.

I'm confused to fix the problem, sometimes I success to checked them but all of the checkbox checked also can't uncheck the checkbox.

this is my code

export default function EditPermission (props){
const {role} = usePage().props
const { data, setData, put, processing, errors, reset } = useForm({
    name: role.name || '',
    permissions: [] // store the permissions data on role

})

const mapPermissionsOnRole = () => {
    for(let i=0; i < role.permissions.length; i  ){
       data.permissions.push(role.permissions[i]['name'])
    }
} //map the already exist permissions and push to data.permissions

const handleChecked = (e) => {
    let value = e.target.name;
    if (e.target.checked) {
        setData("permissions", [...data.permissions, value]);

    } else {
        setData(
            "permissionss",
            data.permissions.filter((item) => {
                return item !== value
            })
        );
    }
};

const submit = (e) => {
    e.preventDefault();
    put(route('role.update',permission.id));
};



return (
    <AuthenticatedLayout auth={props.auth} errors={props.errors}>
    <div className="w-full lg:max-w-6xl mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">        

        <form onSubmit={submit}>
            <div>
                    {props.permissions && props.permissions.length > 0 ? role.permissions.map((permissions, i) => {
                        return(
                            <div>
                                <Checkbox checked={props.permissions[i].name.includes(data.permissions)} name={permissions.name} value={data.permissions} handleChange={handleChecked} />{permissions.name}
                            </div>
                        )
                            
                            
                        }):<p>Permissions Coming Soon!</p>
                    }

                <PrimaryButton className="ml-4" processing={processing}>
                    Update
                </PrimaryButton>
            </div>

        </form>
    </div>

    </AuthenticatedLayout>
    
)

}

CodePudding user response：

you need to call const mapPermissionsOnRole. try using the useEffect to call the data and push it to the array of data.permissions.

A quick tip is to use the id better than the name of the permission for comparison or use a new attribute on the database that the data is is_checked or not.

CodePudding user response：

Try by catching the index from your map and put checked and uncheked through that state. you can refer this link even.

https://codesandbox.io/s/wild-silence-b8k2j?file=/src/App.js:0-1904