Why doesn't my checkbox change when I click on it

Question

I am unable to change the checkbox value when I click on it. But when I save it and re-call the API I am getting the expected value.

{state?.skuModifierList?.map((item) => {
    return (
        <Panel 
            header={item?.name}
            key={item.id}
            className="panel-styles"
            extra={<DeleteOutlined onClick={() => deleteModifier(item.id)} className="delete-modifier-icon"/>}
        >
            <div>
                <Row gutter={[8, 8]}>
                    {item?.options?.map((option) => {
                        return(
                            <Col {...({ sm: 24, md: 12 })} key={option?.modifier_option_id}>
                                <div className='modifier-checkbox-wrapper'>
                                    <Row gutter={[8, 8]}>
                                        <Col {...({ sm: 24, md: 20 })}>
                                            {option?.name}
                                        </Col>
                                        <Col {...({ sm: 24, md: 4 })}>
                                            <Checkbox 
                                                checked = {option?.suppressed == true ? false : true}
                                                onChange={(e) => handleChange({
                                                    value:e.target.checked, 
                                                    modifierId:item.id,
                                                    optionId:option?.modifier_option_id,
                                                })}
                                            />
                                        </Col>
                                    </Row>
                                </div>
                            </Col>
                        )
                    })}
                </Row>
                <div className='save-modifier-options-btn-wrapper'>
                    <Button type="primary" onClick={updateModifierOptions} className="save-modifier-options-btn">
                        Save
                    </Button>
                </div>
            </div>
        </Panel>
    )
})}

If I change the attribute from checked to defaultChecked then in the UI the checkbox is updating but I am not getting the updated data. Without a page refresh.

This is my handle change function

const handleChange = ({value, modifierId, optionId}) => {
        if(selectedModifierId !== modifierId){
            optionList = []
        }

        selectedModifierId = modifierId
        const tempList = [...state?.skuModifierList];

        tempList?.map((i) => {
            if(i?.id == modifierId){
                i?.options?.map((op) => {
                    if(op?.modifier_option_id == optionId){
                        if(value == false) {
                            optionList?.push(op?.modifier_option_id)
                        }
                        if(value == true){
                            if(optionList?.includes(op?.modifier_option_id)){
                                const index = optionList?.indexOf(op?.modifier_option_id);
                                optionList?.splice(index, 1);
                            }
                        }
                    }
                })
            }
        })
    }

What does your `handleChange` function do? Can you add that too? — Zsolt Meszaros, Mar 02 '23 at 11:13

score 1 · Answer 1 · answered Mar 02 '23 at 17:29

Adding to what @SuperGalou said, it is possible to update an array to trigger re-render.

You can use loadash, use loadash.deepClone(arr).

You can also consider JSON.parse(JSON.stringify(arr))

You can refer here more such options
https://stackoverflow.com/a/122704/16576319

score 0 · Answer 2 · answered Mar 02 '23 at 11:15

The object in your state is an array of object.

Changing a property value in an object inside an array isn't going to re-render your component as for React the value of the array didn't change.

It will however trigger re-render if you add or remove an element of your array.

for example if you consider this array in your state

[{
    name: "item1",
    checked: false
},
{
    name: "item2",
    checked: false
}]

And that you edit an object inside of it to become this :

[{
    name: "item1",
    checked: true 
},
{
    name: "item2",
    checked: false
}]

re-render isn't going to be triggered.

I don't realy know any clean fixes for this, you can try setting only the default value of your checkBox and letting the inside state of the checkbox handle if it's visualy checked or not.

You can also add a boolean in your state and use it as an id int your render to be able to re-render whenever you want. But it is definitively an ugly fix.

Is it possible to update an state inside the react map function — rasif sahl, Mar 02 '23 at 11:18

Why doesn't my checkbox change when I click on it

2 Answers2