fix some react warnings about non-unique keys

client/src/components/infoview/main.tsx

@@ -255,7 +255,8 @@ function GoalsTab({proofStep} : {proofStep: ProofStep}) {
   return <div>
     <div className="tab-bar">
       {proofStep.goals.map((goal, i) => (
-        <div className={`tab ${i == (selectedGoal) ? "active": ""}`} onClick={(ev) => { setSelectedGoal(i); ev.stopPropagation() }}>
+        // TODO: Should not use index as key.
+        <div key={`proof-goal-${i}`} className={`tab ${i == (selectedGoal) ? "active": ""}`} onClick={(ev) => { setSelectedGoal(i); ev.stopPropagation() }}>
           {i ? `Goal ${i+1}` : "Active Goal"}
         </div>
       ))}
@@ -382,16 +383,15 @@ export function CommandLineInterface(props: {world: string, level: number, data:
         if (i == proof.length - 1 && hasInteractiveErrors(step.errors)) {
           // if the last command contains an error, we only display the errors but not the
           // entered command as it is still present in the command line.
-          return <div>
+          // TODO: Should not use index as key.
+          return <div key={`proof-step-${i}`}>
             <Errors errors={step.errors} commandLineMode={true}/>
           </div>
         } else {
-          return <>
-            <div className={`step step-${i}` + (selectedStep == i ? ' selected' : '')} onClick={toggleSelectStep(i)}>
-              <Command command={step.command} deleteProof={deleteProof(i)}/>
-              <Errors errors={step.errors} commandLineMode={true}/>
-              <GoalsTab proofStep={step}/>
-            </div>
+          return <div key={`proof-step-${i}`} className={`step step-${i}` + (selectedStep == i ? ' selected' : '')} onClick={toggleSelectStep(i)}>
+            <Command command={step.command} deleteProof={deleteProof(i)}/>
+            <Errors errors={step.errors} commandLineMode={true}/>
+            <GoalsTab proofStep={step}/>
             {/* Show a message that there are no goals left */}
             {!step.goals.length && (
               <div className="message information">
@@ -404,7 +404,7 @@ export function CommandLineInterface(props: {world: string, level: number, data:
                 }
               </div>
             )}
-          </>
+          </div>
         }
       }) : <CircularProgress />}
     </div>

client/src/components/infoview/messages.tsx

@@ -48,10 +48,11 @@ function Error({error, commandLineMode} : {error : InteractiveDiagnostic, comman
   </div>
 }
 
+// TODO: Should not use index as key.
 /** A list of messages (info/warning/error) that are produced after this command */
 export function Errors ({errors, commandLineMode} : {errors : InteractiveDiagnostic[], commandLineMode : boolean}) {
   return <div>
-    {errors.map((err) => (<Error error={err} commandLineMode={commandLineMode}/>))}
+    {errors.map((err, i) => (<Error key={`error-${i}`} error={err} commandLineMode={commandLineMode}/>))}
   </div>
 }