Make InspectorSidebar a functional component

Summary: Refactoring a bit to make a change easier.

Reviewed By: jknoxville

Differential Revision: D19330542

fbshipit-source-id: 5926b110d04d73e109ea287cacd4e120ea8c9986

src/plugins/layout/InspectorSidebar.tsx

@@ -94,9 +94,8 @@ type Props = {
   logger: Logger;
 };
 
-export default class Sidebar extends Component<Props> {
-  render() {
-    const {element} = this.props;
+const Sidebar: React.FC<Props> = (props: Props) => {
+  const {element} = props;
   if (!element || !element.data) {
     return <NoData grow>No data</NoData>;
   }
@@ -104,12 +103,7 @@ export default class Sidebar extends Component<Props> {
   const sections: Array<any> =
     (SidebarExtensions &&
       SidebarExtensions.map(ext =>
-          ext(
-            this.props.client,
-            this.props.realClient,
-            element.id,
-            this.props.logger,
-          ),
+        ext(props.client, props.realClient, element.id, props.logger),
       )) ||
     [];
 
@@ -135,27 +129,27 @@ export default class Sidebar extends Component<Props> {
         }
         sections.push(
           <InspectorSidebarSection
-              tooltips={this.props.tooltips}
+            tooltips={props.tooltips}
             key={extraSection}
             id={extraSection}
             data={data}
-              onValueChanged={this.props.onValueChanged}
+            onValueChanged={props.onValueChanged}
           />,
         );
       }
     } else {
       sections.push(
         <InspectorSidebarSection
-            tooltips={this.props.tooltips}
+          tooltips={props.tooltips}
           key={key}
           id={key}
           data={element.data[key]}
-            onValueChanged={this.props.onValueChanged}
+          onValueChanged={props.onValueChanged}
         />,
       );
     }
   }
 
-    return sections;
-  }
-}
+  return <>{sections}</>;
+};
+export default Sidebar;