Fix default props.

frontend/components/CopyField.tsx

@@ -25,21 +25,21 @@ import { Overlay, Tooltip } from 'react-bootstrap';
 import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FormattedMessage } from './localization';
 
-const CopyField = ({
+function CopyField({
   children,
-  copyIcon = 'copy',
+  copyIcon,
-  icon = null,
+  icon,
 }: {
   children: string,
   copyIcon?: IconProp,
   icon?: IconProp,
-}) => {
+}) {
   const [show, setShow] = useState(false);
   const target = useRef(null);
   const textbox = useRef(null);
   let timer: NodeJS.Timeout = null;
 
-  function doCopy() {
+  const doCopy = () => {
     if (timer !== null) {
       clearTimeout(timer);
     }
@@ -52,7 +52,7 @@ const CopyField = ({
       setShow(false);
     }, 3000);
     return false;
-  }
+  };
 
   return (
     <InputGroup>
@@ -83,6 +83,11 @@ const CopyField = ({
       </Button>
     </InputGroup>
   );
+}
+
+CopyField.defaultProps = {
+  copyIcon: 'copy',
+  icon: null,
 };
 
 export default CopyField;

frontend/components/DarkToggler.tsx

@@ -25,10 +25,10 @@ import {
 import { FormattedMessage } from './localization';
 
 export default function DarkToggler({
-  isDarkEnabled = false,
+  isDarkEnabled,
-  onChangeDarkMode = null,
+  onChangeDarkMode,
-  disabled = false,
+  disabled,
-  showLoading = false,
+  showLoading,
 }: {
   isDarkEnabled?: boolean,
   onChangeDarkMode?: (value: boolean) => void,
@@ -55,3 +55,10 @@ export default function DarkToggler({
     </Button>
   );
 }
+
+DarkToggler.defaultProps = {
+  isDarkEnabled: false,
+  onChangeDarkMode: null,
+  disabled: false,
+  showLoading: false,
+};

frontend/components/DownloadButton.tsx

@@ -23,7 +23,7 @@ import { getDownloadURL } from 'util/api';
 import { FormattedMessage } from './localization';
 
 export default function DownloadButton({
-  icon = 'download',
+  icon,
   id,
   fileName,
 }: {
@@ -42,3 +42,7 @@ export default function DownloadButton({
     </Button>
   );
 }
+
+DownloadButton.defaultProps = {
+  icon: 'download',
+};

frontend/components/Filter.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 export default function Filter<T, U extends React.ReactNode>({
   items,
   query = '',
-  isCaseSensitive = false,
+  isCaseSensitive,
   keys,
   output,
 }: {
@@ -50,3 +50,7 @@ export default function Filter<T, U extends React.ReactNode>({
     </>
   );
 }
+
+Filter.defaultProps = {
+  isCaseSensitive: false,
+};

frontend/components/LocaleSwitcher.tsx

@@ -24,10 +24,10 @@ import { FormattedMessage } from './localization';
 import { availableLocales, defaultLocale, localeDescriptions } from '../util/localization';
 
 export default function LocaleSwitcher({
-  locale = defaultLocale,
+  locale,
-  onChangeLocale = null,
+  onChangeLocale,
-  disabled = false,
+  disabled,
-  showLoading = false,
+  showLoading,
 }: {
   locale?: string,
   onChangeLocale?: (value: string) => void,
@@ -76,3 +76,10 @@ export default function LocaleSwitcher({
     </DropdownButton>
   );
 }
+
+LocaleSwitcher.defaultProps = {
+  locale: defaultLocale,
+  onChangeLocale: null,
+  disabled: false,
+  showLoading: false,
+};