Updating state value of checkbox in a React Menu template

In React applications, managing the state of components is crucial for creating interactive user interfaces. When using a menu with checkboxes, it is often necessary to update the state value of these checkboxes based on user interactions. This article provides a guide on how to achieve this using template support in React.

Use the useState hook to manage the checkbox state, allowing tracking of checked or unchecked items. Create a menu with checkboxes using templates, bind the checked state to the state variable. Create a function to update the state when the checkbox is clicked, and ensure the menu is rendered with the updated state.

Here is a simple example demonstrating how to implement the above steps:

let menuObj = useRef(null);
const [menuitems, setMenuitems] = useState(dataSource.default.templateData);
const menuTemplate = (data) => {
    return data.category ? (
        <span>{data.category}</span>
    ) : data.value ? (
        <div style={{ width: "100%", display: "flex", justifyContent: "space-between" }}>
            <CheckBoxComponent cssClass="e-menu-ckb" label={data.value} checked={data.checkValue} />
        </div>
    ) : <div></div>;
};

function onSelect(args) {
    newMenuItems = newMenuItems ?? menuitems;
    newMenuItems = newMenuItems.map(menuItem => {
        if (menuItem.options) {
            const newOptions = menuItem.options.map(option => {
                if (option.value === args.item.value) {
                    return { ...option, checkValue: !args.item.checkValue };
                }
                return option;
            });
            return { ...menuItem, options: newOptions };
        }
        return menuItem;
    });
}

function onClose(args) {
    if (closest(args.event.target, '.e-menu-ckb')) {
        args.cancel = true;
    } else if (newMenuItems) {
        setTimeout(function() {
            setMenuitems(newMenuItems);
            menuObj.current.dataBind();
        }, 100);
    }
}

return (
    <MenuComponent 
        ref={menuObj} 
        items={menuitems} 
        fields={menuFields} 
        template={menuTemplate} 
        cssClass="e-template-menu" 
        select={onSelect} 
        beforeClose={onClose}
    />
);

Sample : StackBlitz sample