# &lt;BehaviorsAndActions /&gt; Component

## Description

A section for handling editor object behaviors and their corresponding actions,

For example, if someone clicks on a button (a behavior) on the canvas, you likely will want the page to redirect to a different page (an action). Or you may want it to trigger an upsell purchase (a different action)

For example, if someone watches a video for more than 2.5 minutes (a behavior), it should show an order button

This component will show an <ActionSelector /> component for each of the behaviors associated with the selected object

## Checklist

This component should...

- Should render the component in the dom
- Should render an <ActionSelector /> component for each behavior associated with this item
- Should be able to add new behaviors to the list so that multiple behaviors can be tracked
- Should be able to delete any behavior and have it be removed from the list of behaviors to track
- Should be able to add multiple actions to any of my tracked behaviors
- Should be able to delete any <ActionSelector />'s that show and have it be removed from the list of actions to perform
- Should show the text found in the label prop as the title for the section (and each action's fieldset group)
- Should only show a subset of behaviors based on the filter given in the filter prop (e.g. only show button behaviors, etc.)
- The actions property of the editor item's setting object should update to reflect the changes set when the onUpdate() event has been called
- Should trigger the onUpdate() event when an interaction setting has changed
- Should trigger the [onInteractionUpdate] plugin hook when an interaction setting has changed
- Should trigger the [onInteractionsRender] plugin hook when the Interactions component is being rendered

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

```
import * as React from 'react'
import * as BehaviorsAndActions from '@sandcastle/Components/Sections/Behaviors And Actions`

export default () => (
  <BehaviorsAndActions

  />
)
```

## Best Practices

To do: Add any Best Practices here

## Lifecycle Hooks

To do: Add any Lifecycle Hooks here

## Related Components

To do: Add any Related Components here
