diff --git a/.betterer.results b/.betterer.results
index 1c618f107af..4a6e222ff94 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -140,8 +140,8 @@ exports[`no enzyme tests`] = {
     "public/app/features/api-keys/ApiKeysAddedModal.test.tsx:3246264379": [
       [0, 20, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx:1463123173": [
-      [0, 17, 13, "RegExp match", "2409514259"]
+    "public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx:1538132660": [
+      [2, 17, 13, "RegExp match", "2409514259"]
     ],
     "public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx:2357087833": [
       [0, 35, 13, "RegExp match", "2409514259"]
@@ -4339,8 +4339,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
     "public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx
index e35d6d1487e..d5872aaadd0 100644
--- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx
+++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.test.tsx
@@ -1,3 +1,5 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { mount } from 'enzyme';
 import React from 'react';
 
@@ -27,10 +29,16 @@ describe('DashboardRow', () => {
     expect(wrapper.find('.dashboard-row--collapsed')).toHaveLength(0);
   });
 
-  it('Should collapse after clicking title', () => {
-    wrapper.find('.dashboard-row__title').simulate('click');
+  it('Should collapse when the panel is collapsed', async () => {
+    const panel = new PanelModel({ collapsed: true });
+    render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
+    const row = screen.getByTestId('dashboard-row-container');
+    expect(row).toHaveClass('dashboard-row--collapsed');
+  });
 
-    expect(wrapper.find('.dashboard-row--collapsed')).toHaveLength(1);
+  it('Should collapse after clicking title', async () => {
+    render(<DashboardRow panel={panel} dashboard={dashboardMock} />);
+    await userEvent.click(screen.getByTestId('data-testid dashboard-row-title-'));
     expect(dashboardMock.toggleRow.mock.calls).toHaveLength(1);
   });
 
diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
index b73c737c5cc..0b37e26c305 100644
--- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
+++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
@@ -19,13 +19,6 @@ export interface DashboardRowProps {
 
 export class DashboardRow extends React.Component<DashboardRowProps, any> {
   sub?: Unsubscribable;
-  constructor(props: DashboardRowProps) {
-    super(props);
-
-    this.state = {
-      collapsed: this.props.panel.collapsed,
-    };
-  }
 
   componentDidMount() {
     this.sub = this.props.dashboard.events.subscribe(RefreshEvent, this.onVariableUpdated);
@@ -43,10 +36,6 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
 
   onToggle = () => {
     this.props.dashboard.toggleRow(this.props.panel);
-
-    this.setState((prevState: any) => {
-      return { collapsed: !prevState.collapsed };
-    });
   };
 
   onUpdate = (title: string, repeat?: string | null) => {
@@ -77,7 +66,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
   render() {
     const classes = classNames({
       'dashboard-row': true,
-      'dashboard-row--collapsed': this.state.collapsed,
+      'dashboard-row--collapsed': this.props.panel.collapsed,
     });
 
     const title = getTemplateSrv().replace(this.props.panel.title, this.props.panel.scopedVars, 'text');
@@ -86,13 +75,13 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
     const canEdit = this.props.dashboard.meta.canEdit === true;
 
     return (
-      <div className={classes}>
+      <div className={classes} data-testid="dashboard-row-container">
         <a
           className="dashboard-row__title pointer"
           data-testid={selectors.components.DashboardRow.title(title)}
           onClick={this.onToggle}
         >
-          <Icon name={this.state.collapsed ? 'angle-right' : 'angle-down'} />
+          <Icon name={this.props.panel.collapsed ? 'angle-right' : 'angle-down'} />
           {title}
           <span className="dashboard-row__panel_count">
             ({count} {panels})
@@ -110,7 +99,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
             </a>
           </div>
         )}
-        {this.state.collapsed === true && (
+        {this.props.panel.collapsed === true && (
           <div className="dashboard-row__toggle-target" onClick={this.onToggle}>
             &nbsp;
           </div>