ref(tsc): convert arrayValue to FC (#82481)

static/app/utils/discover/arrayValue.tsx

@@ -1,4 +1,4 @@
-import {Component} from 'react';
+import {useState} from 'react';
 import styled from '@emotion/styled';
 
 import {t} from 'sentry/locale';
@@ -9,42 +9,33 @@ import {nullableValue} from './fieldRenderers';
 type Props = {
   value: Array<string | null>;
 };
-type State = {
-  expanded: boolean;
-};
 
-class ArrayValue extends Component<Props, State> {
-  state: State = {
-    expanded: false,
-  };
-  handleToggle = () => {
-    this.setState(prevState => ({
-      expanded: !prevState.expanded,
-    }));
+function ArrayValue(props: Props) {
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const {value} = props;
+
+  const handleToggle = () => {
+    setExpanded(!expanded);
   };
 
-  render() {
-    const {expanded} = this.state;
-    const {value} = this.props;
-    return (
-      <ArrayContainer expanded={expanded}>
-        {expanded &&
-          value
-            .slice(0, value.length - 1)
-            .map((item, i) => (
-              <ArrayItem key={`${i}:${item}`}>{nullableValue(item)}</ArrayItem>
-            ))}
-        <ArrayItem>{nullableValue(value.slice(-1)[0])}</ArrayItem>
-        {value.length > 1 ? (
-          <ButtonContainer>
-            <button onClick={this.handleToggle}>
-              {expanded ? t('[collapse]') : t('[+%s more]', value.length - 1)}
-            </button>
-          </ButtonContainer>
-        ) : null}
-      </ArrayContainer>
-    );
-  }
+  return (
+    <ArrayContainer expanded={expanded}>
+      {expanded &&
+        value
+          .slice(0, value.length - 1)
+          .map((item, i) => (
+            <ArrayItem key={`${i}:${item}`}>{nullableValue(item)}</ArrayItem>
+          ))}
+      <ArrayItem>{nullableValue(value.slice(-1)[0])}</ArrayItem>
+      {value.length > 1 ? (
+        <ButtonContainer>
+          <button onClick={handleToggle}>
+            {expanded ? t('[collapse]') : t('[+%s more]', value.length - 1)}
+          </button>
+        </ButtonContainer>
+      ) : null}
+    </ArrayContainer>
+  );
 }
 
 const ArrayContainer = styled('div')<{expanded: boolean}>`