Give IsaacContent object unique React keys

Author: jacbn

src/app/components/content/IsaacContent.tsx

@@ -42,15 +42,26 @@ export interface IsaacContentProps extends RouteComponentProps {
 
 export const IsaacContent = withRouter((props: IsaacContentProps) => {
     const {doc: {type, layout, encoding, value, children}, match} = props;
+    const keyedProps = {...props, key: props.doc.id};
+    {/* 
+        Each IsaacContent is assumed to be independent, not sharing state with any other.
+        However, React will reuse components if they are the same type, have the same key (or undefined), and exist in the same place in the DOM.
+        If two components A and B meet these criteria, if you switch from component A to component B, any e.g. useStates in B will not
+        initialise as expected, but will retain stale data from A.
+
+        This is a problem for any structure where one of several <IsaacContent>s are displayed, e.g. quiz sections, tabs, ... .
+
+        To avoid this, we set the key of each <IsaacContent> to its content ID.
+    */}
 
     let selectedComponent;
     let tempSelectedComponent;
     if (isQuestion(props.doc)) {
         // FIXME: Someday someone will remove /quiz/ and this comment too.
         if (match.path.startsWith("/quiz/") || match.path.startsWith("/test/")) {
-            tempSelectedComponent = <QuizQuestion {...props} />;
+            tempSelectedComponent = <QuizQuestion {...keyedProps} />;
         } else {
-            tempSelectedComponent = <IsaacQuestion {...props} />;
+            tempSelectedComponent = <IsaacQuestion {...keyedProps} />;
         }
 
         if (type === "isaacInlineRegion") {
@@ -60,25 +71,25 @@ export const IsaacContent = withRouter((props: IsaacContentProps) => {
         selectedComponent = <QuestionContext.Provider value={props.doc.id}>{tempSelectedComponent}</QuestionContext.Provider>;
     } else {
         switch (type) {
-            case "figure": selectedComponent = <IsaacFigure {...props} />; break;
-            case "image": selectedComponent = <IsaacImage {...props} />; break;
-            case "video": selectedComponent = <IsaacVideo {...props} />; break;
-            case "codeSnippet": selectedComponent = <IsaacCodeSnippet {...props} />; break;
-            case "interactiveCodeSnippet": selectedComponent = <IsaacInteractiveCodeSnippet {...props} />; break;
-            case "glossaryTerm": selectedComponent = <IsaacGlossaryTerm {...props} />; break;
-            case "isaacFeaturedProfile": selectedComponent = <IsaacFeaturedProfile {...props} />; break;
-            case "isaacQuestion": selectedComponent = <IsaacQuickQuestion {...props} />; break;
-            case "anvilApp": selectedComponent = <AnvilApp {...props} />; break;
-            case "isaacCard": selectedComponent = <IsaacCard {...props} />; break;
-            case "isaacCardDeck": selectedComponent = <IsaacCardDeck {...props} />; break;
-            case "codeTabs": selectedComponent = <IsaacCodeTabs {...props} />; break;
+            case "figure": selectedComponent = <IsaacFigure {...keyedProps} />; break;
+            case "image": selectedComponent = <IsaacImage {...keyedProps} />; break;
+            case "video": selectedComponent = <IsaacVideo {...keyedProps} />; break;
+            case "codeSnippet": selectedComponent = <IsaacCodeSnippet {...keyedProps} />; break;
+            case "interactiveCodeSnippet": selectedComponent = <IsaacInteractiveCodeSnippet {...keyedProps} />; break;
+            case "glossaryTerm": selectedComponent = <IsaacGlossaryTerm {...keyedProps} />; break;
+            case "isaacFeaturedProfile": selectedComponent = <IsaacFeaturedProfile {...keyedProps} />; break;
+            case "isaacQuestion": selectedComponent = <IsaacQuickQuestion {...keyedProps} />; break;
+            case "anvilApp": selectedComponent = <AnvilApp {...keyedProps} />; break;
+            case "isaacCard": selectedComponent = <IsaacCard {...keyedProps} />; break;
+            case "isaacCardDeck": selectedComponent = <IsaacCardDeck {...keyedProps} />; break;
+            case "codeTabs": selectedComponent = <IsaacCodeTabs {...keyedProps} />; break;
             default:
                 switch (layout) {
-                    case "tabs": selectedComponent = <IsaacTabs {...props} />; break;
-                    case isTabs(layout): selectedComponent = <IsaacTabs {...props} style={layout?.split('/')[1]} />; break;
-                    case "callout": selectedComponent = <IsaacCallout {...props} />; break;
-                    case "accordion": selectedComponent = <IsaacAccordion {...props} />; break;
-                    case "horizontal": selectedComponent = <IsaacHorizontal {...props} />; break;
+                    case "tabs": selectedComponent = <IsaacTabs {...keyedProps} />; break;
+                    case isTabs(layout): selectedComponent = <IsaacTabs {...keyedProps} style={layout?.split('/')[1]} />; break;
+                    case "callout": selectedComponent = <IsaacCallout {...keyedProps} />; break;
+                    case "accordion": selectedComponent = <IsaacAccordion {...keyedProps} />; break;
+                    case "horizontal": selectedComponent = <IsaacHorizontal {...keyedProps} />; break;
                     case "clearfix": selectedComponent = <>&nbsp;</>; break;
                     default: selectedComponent =
                         <IsaacContentValueOrChildren encoding={encoding} value={value}>