Change a few remaining key= attributes to be always unique.

Element lists in React must have a unique key={...} attribute. This used to be
a big problem for Votr because most tables directly used fladgejt structure
keys, which weren't always unique. It was fixed when we changed all tables to
use SortableTable, because it uses key={originalIndex} on table rows.

This commit just hardens the last few cases to really make sure they're unique.
They are very unlikely to have duplicates anyway.

Updates #91.

votrfront/js/RegisterOsobPage.tsx

@@ -96,8 +96,8 @@ function RegisterOsobForm() {
             value={state[name]}
             onChange={handleFieldChange}
           >
-            {items.map((item) => (
-              <option key={item.id} value={item.id}>
+            {items.map((item, index) => (
+              <option key={index} value={item.id}>
                 {item.title}
               </option>
             ))}

votrfront/js/RegisterPredmetovPage.tsx

@@ -112,8 +112,8 @@ function RegisterPredmetovForm() {
             value={state[name]}
             onChange={handleFieldChange}
           >
-            {items.map((item) => (
-              <option key={item.id} value={item.id}>
+            {items.map((item, index) => (
+              <option key={index} value={item.id}>
                 {item.title}
               </option>
             ))}

votrfront/js/StudiumSelector.tsx

@@ -23,12 +23,12 @@ export function StudiumSelector({ children }: { children: React.ReactNode }) {
         <li>
           <span className="text-pill">Štúdium:</span>
         </li>
-        {items.map((studium) => {
-          var key = studium.studium_key;
-          var active = key == query.studiumKey;
+        {items.map((studium, index) => {
+          var studiumKey = studium.studium_key;
+          var active = studiumKey == query.studiumKey;
           return (
-            <li key={key} className={active ? "active" : ""}>
-              <RelativeLink href={{ studiumKey: key }}>
+            <li key={index} className={active ? "active" : ""}>
+              <RelativeLink href={{ studiumKey }}>
                 {studium.sp_skratka}
               </RelativeLink>
             </li>

votrfront/js/ZapisPage.tsx

@@ -633,8 +633,8 @@ function ZapisZPonukyForm() {
             value={state[name]}
             onChange={handleFieldChange}
           >
-            {items.map((item) => (
-              <option key={item.id} value={item.id}>
+            {items.map((item, index) => (
+              <option key={index} value={item.id}>
                 {item.title}
               </option>
             ))}

votrfront/js/ZapisnyListSelector.tsx

@@ -47,12 +47,14 @@ export function ZapisnyListSelector({
         <li>
           <span className="text-pill">Zápisný list:</span>
         </li>
-        {items.map((zapisnyList) => {
-          var key = zapisnyList.zapisny_list_key;
-          var active = key == query.zapisnyListKey;
+        {items.map((zapisnyList, index) => {
+          // An item's `index` might change over time as more get_zapisne_listy
+          // responses arrive, but that should be harmless here.
+          var zapisnyListKey = zapisnyList.zapisny_list_key;
+          var active = zapisnyListKey == query.zapisnyListKey;
           return (
-            <li key={key} className={active ? "active" : ""}>
-              <RelativeLink href={{ zapisnyListKey: key }}>
+            <li key={index} className={active ? "active" : ""}>
+              <RelativeLink href={{ zapisnyListKey }}>
                 {zapisnyList.akademicky_rok} {zapisnyList.sp_skratka}
               </RelativeLink>
             </li>