# Overview

Trigger a state update of a parent item through its children, by utilizing the built-in React [context](https://react.dev/reference/react/hooks#context-hooks) and [hooks](https://react.dev/reference/react/hooks) functionalities.

The [SchedulerEditItem](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/edit-item) provides each of it's `value/callback` pairs through context to be available for each of its child components.

This architecture allows the user to define `what` is happening on every action. The `SchedulerEditItem` already has a default callback handlers, which the developer can override if needed, or explicitly call after custom logic is executed.

## Accessing the Parent State

The `SchedulerEditItem` internal state can be modified by accessing the `value/callback` pair you want to modify, and call the `callback` to trigger an action.

> Accessing the parent state through its children does not toggle `controlled-state` of the component, but rather define `when` a state change must happen. If you want to control the internal state from outside, please refer to the [SchedulerEditItem Controlled State](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/edit-item#controlling-the-editing)

Accessing the internal state can be done through:

* [Custom Hooks](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/state-update#custom-hooks)
* [Context.Consumer](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/state-update#context-consumer)

### Custom Hooks

The following hooks are available for each child [Functional Component](https://react.dev/reference/react/Component) of the `SchedulerEditItem`:

* [useSchedulerEditItemDragItemContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/usescheduleredititemdragitemcontext)
* [useSchedulerEditItemFormItemContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/usescheduleredititemformitemcontext)
* [useSchedulerEditItemRemoveItemContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/usescheduleredititemremoveitemcontext)
* [useSchedulerEditItemResizeItemContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/usescheduleredititemresizeitemcontext)
* [useSchedulerEditItemShowOccurrenceDialogContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/usescheduleredititemshowoccurrencedialogcontext)
* [useSchedulerEditItemShowRemoveDialogContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/usescheduleredititemshowremovedialogcontext)

In order the trigger a state change, use the desired `hook` inside your custom component:

```jsx
const CustomSchedulerItem = (props) => {
    const [formItem, setFormItem] = useSchedulerEditItemFormItemContext();

    const handleClick = React.useCallback(
        () => { setFormItem(props.dataItem); },
        [setFormItem, props.dataItem]
    )

    return (<SchedulerItem {...props} onClick={handleClick} />)
}
```

### Context.Consumer

The following Contexts are available for each child [Class Component](https://react.dev/reference/react/Component) of the `SchedulerEditItem`:

* [SchedulerEditItemDragItemContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemdragitemcontext)
* [SchedulerEditItemFormItemContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemformitemcontext)
* [SchedulerEditItemRemoveItemContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemremoveitemcontext)
* [SchedulerEditItemResizeItemContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemresizeitemcontext)
* [SchedulerEditItemShowOccurrenceDialogContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemshowoccurrencedialogcontext)
* [SchedulerEditItemShowRemoveDialogContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemshowremovedialogcontext)

In order the trigger a state change, use the desired `context` inside your custom component:

```jsx
const CustomSchedulerItem = (props) => {
    const [, setFormItem] = React.useContext(SchedulerEditItemFormItemContext);

    return (
        <SchedulerItem
            {...props}
            onClick={() => { setFormItem(props.dataItem); }}
        />
    );
};
```

## Custom Action Binding

Providing custom bindings for a specific component provides the ability to bind specific actions to state changes. This allows the developer to define a `middleware` to change what is happening on a specific event.

For example, the default `onDoubleClick` handler is changing the internal `formItem` state from `null` to the `props.dataItem` (if `props.isRecurring` is false) which leads to the `form` dialog to be rendered, thus triggering edit. If the application requires such action to be triggered on `onClick`, the developer must handle the `onClick` callback of the `SchedulerItem` and set the corresponding `formItem` state of it's `SchedulerEditItem` parent.

The following example extends the [Attaching callback handlers](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/item#attaching-callback-handlers) demo, to provide editing through the visualized popup.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/items/context/action-binding/func/source.txt)

## Suggested Links

* [API Reference of the Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduler)
* [Scheduler Context](https://www.telerik.com/kendo-react-ui/components/scheduler/context)
* [Slot Context](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/slots/state-update)
* [SchedulerEditSlot](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulereditslot)
* [SchedulerSlot](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/slots/slot)
* [KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/)