Error `activeView is not defined` when using SideNav with Twilio Flex Plugin v2

I am using Twilio Flex plugin to customize flex ui version 2 (beta.1) in react js. I want to add one custom link in a sidebar with a new custom component.

I tried to write code to switch the icon to Active when the created sidebar icon is selected, but I get the following error.

Original error: "activeView is not defined"

The code is as follows.

import React from 'react';
import { FlexPlugin } from '@twilio/flex-plugin';
import TaskView from './components/TaskView/TaskView';
import { SideLink, Actions } from '@twilio/flex-ui';

const PLUGIN_NAME = 'TaskViewPlugin';

export default class TaskViewPlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  /**
   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   *
   * @param flex { typeof import('@twilio/flex-ui') }
   */
  async init(flex, manager) {
    flex.ViewCollection.Content.add(
      <flex.View name='taskView' key='TaskViewPlugin-component'>
        <TaskView key='TaskViewPlugin-component' />
      </flex.View>,
    );

    flex.SideNav.Content.add(
      <SideLink
        key='taskViewSideLink'
        icon='Supervisor'
        iconActive='SupervisorBold'
        isActive={activeView === 'taskView'}
        onClick={() =>
          Actions.invokeAction('NavigateToView', { viewName: 'TaskView' })
        }
      >
        Pending Tasks
      </SideLink>,
      { sortOrder: 2 },
    );
  }
}

Thanks in advance for a help.

Solution

The issue here is that activeView hasn't been defined anywhere. From what I gathered from the video that Jerry linked to, activeView is a property passed into components within Flex. However, you are trying to use it directly in the FlexPlugin object.

Instead, you should create a custom component that returns the new SideLink component, like this:

import React from 'react';
import { SideLink, Actions } from '@twilio/flex-ui';

const TaskViewSidebarButton = ({ activeView } => {
  return <SideLink
           key='taskViewSideLink'
           icon='Supervisor'
           iconActive='SupervisorBold'
           isActive={activeView === 'taskView'}
           onClick={() =>
             Actions.invokeAction('NavigateToView', { viewName: 'TaskView' })
           }
         >
           Pending Tasks
         </SideLink>;
});

export default TaskViewSidebarButton;

Then in your plugin you can import this TaskViewSidebarButton component and use it in the SideNav.Content:

import React from 'react';
import { FlexPlugin } from '@twilio/flex-plugin';
import TaskView from './components/TaskView/TaskView';
import TaskViewSidebarButton from './components/TaskView/TaskViewSidebarButton';

const PLUGIN_NAME = 'TaskViewPlugin';

export default class TaskViewPlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  /**
   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   *
   * @param flex { typeof import('@twilio/flex-ui') }
   */
  async init(flex, manager) {
    flex.ViewCollection.Content.add(
      <flex.View name='TaskView' key='TaskViewPlugin-component'>
        <TaskView key='TaskViewPlugin-component' />
      </flex.View>,
    );

    flex.SideNav.Content.add(
      <TaskViewSidebarButton key="task-view-sidebar-button" />,
      { sortOrder: 2 },
    );
  }
}

That way the correct props are passed to your TaskViewSidebarButton and you can extract activeView from the props and use it to render the active state of the button.