Minor cleanup to Dropdown logic

client/src/components/util/GameCreationForm/Dropdown.jsx

@@ -3,8 +3,8 @@ import { CSSTransition } from 'react-transition-group';
 import styles from './Dropdown.module.css';
 
 export const Item = ({ value, display, onSelect, children }) => (
-  <div className={styles.item} onClick={() => onSelect(value, display ?? value)}>
-    {children}
+  <div className={styles.item} onClick={() => onSelect(value ?? children, display ?? value ?? children)}>
+    {children ?? display ?? value}
   </div>
 );
 
@@ -21,16 +21,13 @@ export const Dropdown = ({ open, onSelect, onClick, children }) => {
     }
     let found = null;
     children.forEach(element => {
-      if (!React.isValidElement(element) || found) {
-        return;
-      }
-      if (element.props['default']) {
+      if (React.isValidElement(element) && !found && element.props['default']) {
         const { value, display } = element.props;
         found = display ?? value;
       }
     });
     setDisplayed(found);
-  }, [children, displayed])
+  }, [children, displayed]);
   return (
     <div className={styles.container}>
       <div className={styles.button} onClick={onClick}>{displayed}</div>