How to use the office-ui-fabric-react/lib/MessageBar.MessageBarType.error function in office-ui-fabric-react

(errorMessage: string, exceptionMessage: string): IAction => {
        // tslint:disable-next-line:no-console
        console.log(exceptionMessage);
        return {
            payload: {
                message: errorMessage,
                showMessage: true,
                type: MessageBarType.error
            },
            type: actions.HANDLE_ASYNC_ERROR
        };
    };

return async (dispatch: Dispatch>) => {
        try {
            const customActionsRet: ICustomAction[] = await api.getCustomActions(caType);
            dispatch(setAllProperties(customActionsRet));
        } catch (error) {
            // tslint:disable-next-line:no-console
            console.log(error);
            dispatch(setMessageData({
                message: constants.ERROR_MESSAGE_GET_ALL_CUSTOM_ACTIONS,
                showMessage: true,
                type: MessageBarType.error
            }));
        }
    };
};

      this.setState((current) => ({ ...current, resultMessage: "Unable to add mo0dernization functionality to site", resultMessageType: MessageBarType.error }));
    });

public render(): React.ReactElement {
    let renderErrorMessage: JSX.Element = null;

    const renderDebugInfos = this.props.enableDebugMode ?
                              :
                              null;

    if (this.state.errorMessage) {
      renderErrorMessage =  {
                                          this.setState({
                                            errorMessage: null,
                                          });
                                        }}
                                        className={styles.errorMessage}>
                                        { this.state.errorMessage };
    }
    
    const renderSearchBox = this.props.enableQuerySuggestions ? 
                          this.renderSearchBoxWithAutoComplete() : 
                          this.renderBasicSearchBox();    
    return (
      <div></div>

const IconButtonStyles = (props: IMessageBarStyleProps): IStyle => {
  const { theme, messageBarType } = props;
  const semanticColors = theme.semanticColors as IExtendedSemanticColors;

  return [
    (messageBarType === MessageBarType.error || messageBarType === MessageBarType.severeWarning) &&
      generateBaseStyle(semanticColors.statusErrorBackground, semanticColors.statusErrorText),

    messageBarType === MessageBarType.info &&
      generateBaseStyle(semanticColors.statusInformationBackground, semanticColors.statusInformationText),

    messageBarType === MessageBarType.success &&
      generateBaseStyle(semanticColors.statusSuccessBackground, semanticColors.statusSuccessText),

    (messageBarType === MessageBarType.warning || messageBarType === MessageBarType.blocked) &&
      generateBaseStyle(semanticColors.statusWarningBackground, semanticColors.statusWarningText),

    !messageBarType && generateBaseStyle(semanticColors.bodyBackground, semanticColors.bodyText)
  ];
};

{(context: LocalizationContextInterface) => (
                    <div>
                        
                                    {context.t(ResourceKeys.deviceInterfaces.command.configure)}
                                }
                        &gt;
                            {context.t(ResourceKeys.deviceInterfaces.interfaceNotFound)}
                        
                    </div>
                )}

public render(): JSX.Element {
    return (
      <div>
        <h1>{this.props.chartTitle}</h1>

        {this.state.error &amp;&amp; {this.state.error}}

        <div>
          {this.state.loading &amp;&amp; }

          {this.props.chartType == 'Bar' &amp;&amp; }
          {this.props.chartType == 'Line' &amp;&amp; </div>

        <footer>
          
            {this.state.loading ? strings.Loading : strings.Refresh}
          
        </footer></div>