diff --git a/Changelog.md b/Changelog.md
index 99a1c6f617..177df172bd 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -24,6 +24,7 @@
 - Fix `extra_hosts` configuration in `compose.yaml` (#7375)
 - Add unit tests for `marks_graders_controller` (#7382)
 - Convert front-end tests from enzyme to react testing library; add `@testing-library/user-event` (#7379)
+- Refactor the `Result` component and its children to use React context API (#7380)
 
 ## [v2.6.1]
 
diff --git a/app/javascript/Components/Modals/create_modify_annotation_panel_modal.jsx b/app/javascript/Components/Modals/create_modify_annotation_panel_modal.jsx
index 097a0c442b..8384a07299 100644
--- a/app/javascript/Components/Modals/create_modify_annotation_panel_modal.jsx
+++ b/app/javascript/Components/Modals/create_modify_annotation_panel_modal.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import Modal from "react-modal";
 
 import MarkdownEditor from "../markdown_editor";
+import {ResultContext} from "../Result/result_context";
 
 class CreateModifyAnnotationPanel extends React.Component {
   constructor(props) {
@@ -16,6 +17,8 @@ class CreateModifyAnnotationPanel extends React.Component {
     };
   }
 
+  static contextType = ResultContext;
+
   updateAnnotationCompletion = () => {
     const annotationTextList = document.getElementById("annotation_text_list");
     const value = this.state.content;
@@ -30,8 +33,8 @@ class CreateModifyAnnotationPanel extends React.Component {
     }
 
     const url = Routes.find_annotation_text_course_assignment_annotation_categories_path(
-      this.props.course_id,
-      this.props.assignment_id,
+      this.context.course_id,
+      this.context.assignment_id,
       {string: value}
     );
 
@@ -93,7 +96,7 @@ class CreateModifyAnnotationPanel extends React.Component {
       }
     });
 
-    if (!this.props.is_reviewer) {
+    if (!this.context.is_reviewer) {
       textArea.keyup(e => {
         if (typing_timer) {
           clearTimeout(typing_timer);
@@ -222,7 +225,7 @@ class CreateModifyAnnotationPanel extends React.Component {
                 name="annotation_text_id"
                 value={this.props.annotation_text_id}
               />
-              {this.props.is_reviewer ? (
+              {this.context.is_reviewer ? (
                 <input
                   type="hidden"
                   id="new_annotation_category"
diff --git a/app/javascript/Components/Modals/create_tag_modal.jsx b/app/javascript/Components/Modals/create_tag_modal.jsx
index 78ed4261ab..de27aad214 100644
--- a/app/javascript/Components/Modals/create_tag_modal.jsx
+++ b/app/javascript/Components/Modals/create_tag_modal.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import TagModal from "../Helpers/tag_modal";
 import Modal from "react-modal";
 import PropTypes from "prop-types";
+import {ResultContext} from "../Result/result_context";
 
 export default class CreateTagModal extends React.Component {
   constructor(props) {
@@ -12,6 +13,8 @@ export default class CreateTagModal extends React.Component {
     };
   }
 
+  static contextType = ResultContext;
+
   componentDidMount() {
     Modal.setAppElement("body");
   }
@@ -23,7 +26,7 @@ export default class CreateTagModal extends React.Component {
         name: this.state.name,
         description: this.state.description,
       },
-      grouping_id: this.props.grouping_id,
+      grouping_id: this.context.grouping_id,
     };
     const options = {
       method: "POST",
@@ -34,7 +37,7 @@ export default class CreateTagModal extends React.Component {
       body: JSON.stringify(data),
     };
     fetch(
-      Routes.course_tags_path(this.props.course_id, {assignment_id: this.props.assignment_id}),
+      Routes.course_tags_path(this.context.course_id, {assignment_id: this.context.assignment_id}),
       options
     )
       .catch(error => {
@@ -74,7 +77,4 @@ export default class CreateTagModal extends React.Component {
 CreateTagModal.propType = {
   isOpen: PropTypes.bool.isRequired,
   onRequestClose: PropTypes.func.isRequired,
-  grouping_id: PropTypes.number,
-  course_id: PropTypes.number.isRequired,
-  assignment_id: PropTypes.number.isRequired,
 };
diff --git a/app/javascript/Components/Modals/filter_modal.jsx b/app/javascript/Components/Modals/filter_modal.jsx
index 2f11d03f46..adb820b1b8 100644
--- a/app/javascript/Components/Modals/filter_modal.jsx
+++ b/app/javascript/Components/Modals/filter_modal.jsx
@@ -4,8 +4,11 @@ import {MultiSelectDropdown} from "../DropDown/MultiSelectDropDown";
 import {SingleSelectDropDown} from "../DropDown/SingleSelectDropDown";
 import {CriteriaFilter} from "../criteria_filter";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {ResultContext} from "../Result/result_context";
 
 export class FilterModal extends React.Component {
+  static contextType = ResultContext;
+
   onToggleOptionTas = user_name => {
     const newArray = [...this.props.filterData.tas];
     if (newArray.includes(user_name)) {
@@ -47,7 +50,7 @@ export class FilterModal extends React.Component {
   };
 
   renderTasDropdown = () => {
-    if (this.props.role === "Instructor") {
+    if (this.context.role === "Instructor") {
       let tas = this.props.tas.map(option => {
         return {key: option[0], display: option[0] + " - " + option[1]};
       });
diff --git a/app/javascript/Components/Result/feedback_file_panel.jsx b/app/javascript/Components/Result/feedback_file_panel.jsx
index ed560a6df1..02e34768d8 100644
--- a/app/javascript/Components/Result/feedback_file_panel.jsx
+++ b/app/javascript/Components/Result/feedback_file_panel.jsx
@@ -1,8 +1,11 @@
 import React from "react";
 import {FileViewer} from "./file_viewer";
 import mime from "mime/lite";
+import {ResultContext} from "./result_context";
 
 export class FeedbackFilePanel extends React.Component {
+  static contextType = ResultContext;
+
   constructor(props) {
     super(props);
     if (props.loading) {
@@ -65,7 +68,7 @@ export class FeedbackFilePanel extends React.Component {
       </a>
     );
     if (this.state.selectedFile !== null) {
-      url = Routes.course_feedback_file_path(this.props.course_id, this.state.selectedFile);
+      url = Routes.course_feedback_file_path(this.context.course_id, this.state.selectedFile);
       file_obj = this.props.feedbackFiles.find(file => file.id === this.state.selectedFile);
       download_feedback_file = (
         <a className="button" href={url} download>
@@ -86,8 +89,8 @@ export class FeedbackFilePanel extends React.Component {
           key={"feedback-file-view"}
         >
           <FileViewer
-            assignment_id={this.props.assignment_id}
-            submission_id={this.props.submission_id}
+            assignment_id={this.context.assignment_id}
+            submission_id={this.context.submission_id}
             selectedFile={file_obj.filename}
             selectedFileURL={url}
             mime_type={mime.getType(file_obj.filename)}
diff --git a/app/javascript/Components/Result/left_pane.jsx b/app/javascript/Components/Result/left_pane.jsx
index f79dc36179..d5a51d4c0c 100644
--- a/app/javascript/Components/Result/left_pane.jsx
+++ b/app/javascript/Components/Result/left_pane.jsx
@@ -7,6 +7,7 @@ import {FeedbackFilePanel} from "./feedback_file_panel";
 import {RemarkPanel} from "./remark_panel";
 import {SubmissionFilePanel} from "./submission_file_panel";
 import {TestRunTable} from "../test_run_table";
+import {ResultContext} from "./result_context";
 
 export class LeftPane extends React.Component {
   constructor(props) {
@@ -17,35 +18,37 @@ export class LeftPane extends React.Component {
     this.submissionFilePanel = React.createRef();
   }
 
-  static getDerivedStateFromProps(props, state) {
+  static contextType = ResultContext;
+
+  getSelectedTabIndex() {
     // Reset selected tab state if props are changed and a tab becomes disabled.
     // Affected tabs are "Test Results" (tabIndex 2), "Feedback Files" (tabIndex 3),
     // and "Remark Request" (tabIndex 4).
     if (
-      (state.tabIndex === 2 && LeftPane.disableTestResultsPanel(props)) ||
-      (state.tabIndex === 3 && LeftPane.disableFeedbackFilesPanel(props)) ||
-      (state.tabIndex === 4 && LeftPane.disableRemarkPanel(props))
+      (this.state.tabIndex === 2 && this.disableTestResultsPanel()) ||
+      (this.state.tabIndex === 3 && this.disableFeedbackFilesPanel()) ||
+      (this.state.tabIndex === 4 && this.disableRemarkPanel())
     ) {
-      return {tabIndex: 0};
+      return 0;
     } else {
-      return null;
+      return this.state.tabIndex;
     }
   }
 
-  static disableTestResultsPanel(props) {
-    return props.is_reviewer || !props.enable_test;
+  disableTestResultsPanel() {
+    return this.context.is_reviewer || !this.props.enable_test;
   }
 
-  static disableFeedbackFilesPanel(props) {
-    return props.is_reviewer || props.feedback_files.length === 0;
+  disableFeedbackFilesPanel() {
+    return this.context.is_reviewer || this.props.feedback_files.length === 0;
   }
 
-  static disableRemarkPanel(props) {
-    if (props.is_reviewer || !props.allow_remarks) {
+  disableRemarkPanel() {
+    if (this.context.is_reviewer || !this.props.allow_remarks) {
       return true;
-    } else if (props.student_view) {
+    } else if (this.props.student_view) {
       return false;
-    } else if (props.remark_submitted) {
+    } else if (this.props.remark_submitted) {
       return false;
     } else {
       return true;
@@ -65,30 +68,35 @@ export class LeftPane extends React.Component {
 
   render() {
     return (
-      <Tabs selectedIndex={this.state.tabIndex} onSelect={tabIndex => this.setState({tabIndex})}>
+      <Tabs
+        selectedIndex={this.getSelectedTabIndex()}
+        onSelect={tabIndex => this.setState({tabIndex})}
+      >
         <TabList>
           <Tab>{I18n.t("activerecord.attributes.submission.submission_files")}</Tab>
           <Tab>{I18n.t("activerecord.models.annotation.other")}</Tab>
-          <Tab disabled={LeftPane.disableTestResultsPanel(this.props)}>
+          <Tab disabled={this.disableTestResultsPanel()}>
             {I18n.t("activerecord.models.test_result.other")}
           </Tab>
-          <Tab disabled={LeftPane.disableFeedbackFilesPanel(this.props)}>
+          <Tab disabled={this.disableFeedbackFilesPanel()}>
             {I18n.t("activerecord.attributes.submission.feedback_files")}
           </Tab>
-          <Tab disabled={LeftPane.disableRemarkPanel(this.props)}>
+          <Tab disabled={this.disableRemarkPanel()}>
             {I18n.t("activerecord.attributes.submission.submitted_remark")}
           </Tab>
         </TabList>
         <TabPanel forceRender={true}>
           <SubmissionFilePanel
             ref={this.submissionFilePanel}
-            result_id={this.props.result_id}
-            submission_id={this.props.submission_id}
-            assignment_id={this.props.assignment_id}
-            grouping_id={this.props.grouping_id}
+            result_id={this.context.result_id}
+            submission_id={this.context.submission_id}
+            assignment_id={this.context.assignment_id}
+            grouping_id={this.context.grouping_id}
             revision_identifier={this.props.revision_identifier}
             show_annotation_manager={!this.props.released_to_students}
-            canDownload={this.props.is_reviewer === undefined ? undefined : !this.props.is_reviewer}
+            canDownload={
+              this.context.is_reviewer === undefined ? undefined : !this.context.is_reviewer
+            }
             fileData={this.props.submission_files}
             annotation_categories={this.props.annotation_categories}
             annotations={this.props.annotations}
@@ -96,15 +104,12 @@ export class LeftPane extends React.Component {
             addExistingAnnotation={this.props.addExistingAnnotation}
             released_to_students={this.props.released_to_students}
             loading={this.props.loading}
-            course_id={this.props.course_id}
+            course_id={this.context.course_id}
           />
         </TabPanel>
         <TabPanel forceRender={true}>
           <div id="annotations_summary">
             <AnnotationPanel
-              result_id={this.props.result_id}
-              submission_id={this.props.submission_id}
-              assignment_id={this.props.assignment_id}
               detailed={this.props.detailed_annotations}
               released_to_students={this.props.released_to_students}
               overallComment={this.props.overall_comment || ""}
@@ -114,11 +119,10 @@ export class LeftPane extends React.Component {
               editAnnotation={this.props.editAnnotation}
               removeAnnotation={this.props.removeAnnotation}
               selectFile={this.selectFile}
-              course_id={this.props.course_id}
             />
           </div>
         </TabPanel>
-        <TabPanel forceRender={!LeftPane.disableTestResultsPanel(this.props)}>
+        <TabPanel forceRender={!this.disableTestResultsPanel()}>
           <div id="testviewer">
             {/* student results page (with instructor tests released) does not need the button */}
             {!this.props.student_view && (
@@ -127,8 +131,8 @@ export class LeftPane extends React.Component {
                   method="post"
                   data-remote="true"
                   action={Routes.run_tests_course_result_path(
-                    this.props.course_id,
-                    this.props.result_id
+                    this.context.course_id,
+                    this.context.result_id
                   )}
                 >
                   <button type="submit" disabled={!this.props.can_run_tests}>
@@ -141,30 +145,25 @@ export class LeftPane extends React.Component {
             )}
 
             <TestRunTable
-              result_id={this.props.result_id}
-              submission_id={this.props.submission_id}
-              assignment_id={this.props.assignment_id}
-              grouping_id={this.props.grouping_id}
+              result_id={this.context.result_id}
+              course_id={this.context.course_id}
+              assignment_id={this.context.assignment_id}
+              grouping_id={this.context.grouping_id}
+              submission_id={this.context.submission_id}
               instructor_run={this.props.instructor_run}
               instructor_view={!this.props.student_view}
-              course_id={this.props.course_id}
             />
           </div>
         </TabPanel>
-        <TabPanel forceRender={!LeftPane.disableFeedbackFilesPanel(this.props)}>
+        <TabPanel forceRender={!this.disableFeedbackFilesPanel()}>
           <FeedbackFilePanel
-            assignment_id={this.props.assignment_id}
             feedbackFiles={this.props.feedback_files}
-            submission_id={this.props.submission_id}
-            course_id={this.props.course_id}
             loading={this.props.loading}
           />
         </TabPanel>
-        <TabPanel forceRender={!LeftPane.disableRemarkPanel(this.props)}>
+        <TabPanel forceRender={!this.disableRemarkPanel()}>
           <div id="remark_request_tab">
             <RemarkPanel
-              result_id={this.props.result_id}
-              assignment_id={this.props.assignment_id}
               assignmentRemarkMessage={this.props.assignment_remark_message}
               updateOverallComment={this.props.update_overall_comment}
               remarkDueDate={this.props.remark_due_date}
@@ -175,8 +174,6 @@ export class LeftPane extends React.Component {
               remarkSubmitted={this.props.remark_submitted}
               overallComment={this.props.remark_overall_comment || ""}
               studentView={this.props.student_view}
-              course_id={this.props.course_id}
-              submission_id={this.props.submission_id}
             />
           </div>
         </TabPanel>
diff --git a/app/javascript/Components/Result/remark_panel.jsx b/app/javascript/Components/Result/remark_panel.jsx
index 20b131d1f5..55d0492843 100644
--- a/app/javascript/Components/Result/remark_panel.jsx
+++ b/app/javascript/Components/Result/remark_panel.jsx
@@ -1,8 +1,10 @@
 import React from "react";
-import {render} from "react-dom";
 import {TextForm} from "./autosave_text_form";
+import {ResultContext} from "./result_context";
 
 export class RemarkPanel extends React.Component {
+  static contextType = ResultContext;
+
   componentDidMount() {
     if (this.props.released_to_students) {
       const comment = this.props.overallComment;
@@ -23,9 +25,9 @@ export class RemarkPanel extends React.Component {
     data[name] = "true";
     return $.ajax({
       url: Routes.update_remark_request_course_assignment_submission_path(
-        this.props.course_id,
-        this.props.assignment_id,
-        this.props.submission_id
+        this.context.course_id,
+        this.context.assignment_id,
+        this.context.submission_id
       ),
       method: "PATCH",
       data: data,
diff --git a/app/javascript/Components/Result/result.jsx b/app/javascript/Components/Result/result.jsx
index b49c1a0bca..5278c47f55 100644
--- a/app/javascript/Components/Result/result.jsx
+++ b/app/javascript/Components/Result/result.jsx
@@ -11,6 +11,7 @@ import {SubmissionSelector} from "./submission_selector";
 import CreateModifyAnnotationPanel from "../Modals/create_modify_annotation_panel_modal";
 import CreateTagModal from "../Modals/create_tag_modal";
 import {pathToNode} from "../Helpers/range_selector";
+import {ResultContext} from "./result_context";
 
 const INITIAL_ANNOTATION_MODAL_STATE = {
   show: false,
@@ -875,149 +876,135 @@ class Result extends React.Component {
   };
 
   render() {
+    const contextValue = {
+      result_id: this.state.result_id,
+      submission_id: this.state.submission_id,
+      assignment_id: this.state.assignment_id,
+      grouping_id: this.state.grouping_id,
+      course_id: this.props.course_id,
+      role: this.props.role,
+      is_reviewer: this.state.is_reviewer,
+    };
+
     return (
       <React.Fragment>
-        <CreateModifyAnnotationPanel
-          categories={this.state.annotation_categories}
-          onRequestClose={() =>
-            this.setState({
-              annotationModal: INITIAL_ANNOTATION_MODAL_STATE,
-            })
-          }
-          is_reviewer={this.state.is_reviewer}
-          assignment_id={this.state.assignment_id}
-          course_id={this.props.course_id}
-          {...this.state.annotationModal}
-        />
-        <SubmissionSelector
-          key="submission-selector"
-          role={this.props.role}
-          can_release={this.state.can_release}
-          result_id={this.state.result_id}
-          submission_id={this.state.submission_id}
-          assignment_id={this.state.assignment_id}
-          grouping_id={this.state.grouping_id}
-          assignment_max_mark={this.state.assignment_max_mark}
-          fullscreen={this.state.fullscreen}
-          group_name={this.state.group_name}
-          is_reviewer={this.state.is_reviewer}
-          marks={this.state.marks || []}
-          marking_state={this.state.marking_state}
-          num_marked={this.state.num_marked}
-          num_collected={this.state.num_collected}
-          released_to_students={this.state.released_to_students}
-          total={this.state.total}
-          toggleFullscreen={this.toggleFullscreen}
-          toggleMarkingState={this.toggleMarkingState}
-          setReleasedToStudents={this.setReleasedToStudents}
-          nextSubmission={this.nextSubmission(1)}
-          randomIncompleteSubmission={this.randomIncompleteSubmission}
-          previousSubmission={this.nextSubmission(-1)}
-          course_id={this.props.course_id}
-          filterData={this.state.filterData}
-          updateFilterData={this.updateFilterData}
-          clearAllFilters={this.resetFilterData}
-          sections={this.state.sections}
-          tas={this.state.tas}
-          available_tags={this.state.available_tags}
-          current_tags={this.state.current_tags}
-          loading={this.state.loading}
-          criterionSummaryData={this.state.criterionSummaryData}
-        />
-        <div key="panes-content" id="panes-content">
-          <CreateTagModal
-            assignment_id={this.state.assignment_id}
-            course_id={this.props.course_id}
-            grouping_id={this.state.grouping_id}
-            isOpen={this.state.isCreateTagModalOpen}
-            onRequestClose={this.closeCreateTagModal}
+        <ResultContext.Provider value={contextValue}>
+          <CreateModifyAnnotationPanel
+            categories={this.state.annotation_categories}
+            onRequestClose={() =>
+              this.setState({
+                annotationModal: INITIAL_ANNOTATION_MODAL_STATE,
+              })
+            }
+            {...this.state.annotationModal}
           />
-          <div id="panes">
-            <div id="left-pane">
-              <LeftPane
-                ref={this.leftPane}
-                loading={this.state.loading}
-                result_id={this.state.result_id}
-                submission_id={this.state.submission_id}
-                assignment_id={this.state.assignment_id}
-                grouping_id={this.state.grouping_id}
-                is_reviewer={this.state.is_reviewer}
-                allow_remarks={this.state.allow_remarks}
-                annotation_categories={this.state.annotation_categories || []}
-                annotations={this.state.annotations || []}
-                assignment_remark_message={this.state.assignment_remark_message}
-                update_overall_comment={this.updateOverallComment}
-                can_run_tests={this.state.can_run_tests}
-                detailed_annotations={this.state.detailed_annotations}
-                enable_test={this.state.enable_test}
-                feedback_files={this.state.feedback_files}
-                instructor_run={this.state.instructor_run}
-                overall_comment={this.state.overall_comment}
-                past_remark_due_date={this.state.past_remark_due_date}
-                released_to_students={this.state.released_to_students}
-                remark_due_date={this.state.remark_due_date}
-                remark_overall_comment={this.state.remark_overall_comment}
-                remark_request_text={this.state.remark_request_text}
-                remark_request_timestamp={this.state.remark_request_timestamp}
-                remark_submitted={this.state.remark_submitted}
-                revision_identifier={this.state.revision_identifier}
-                submission_files={this.state.submission_files}
-                student_view={this.props.role === "Student"}
-                newAnnotation={this.newAnnotation}
-                addAnnotation={this.addAnnotation}
-                addExistingAnnotation={this.addExistingAnnotation}
-                editAnnotation={this.editAnnotation}
-                updateAnnotation={this.updateAnnotation}
-                removeAnnotation={this.removeAnnotation}
-                destroyAnnotation={this.destroyAnnotation}
-                course_id={this.props.course_id}
-              />
-            </div>
-            <div id="drag" />
-            <div id="right-pane">
-              <RightPane
-                assignment_id={this.state.assignment_id}
-                submission_id={this.state.submission_id}
-                result_id={this.state.result_id}
-                grouping_id={this.state.grouping_id}
-                members={this.state.members || []}
-                role={this.props.role}
-                annotations={this.state.annotations}
-                assigned_criteria={this.state.assigned_criteria}
-                assignment_max_mark={this.state.assignment_max_mark}
-                available_tags={this.state.available_tags}
-                criterionSummaryData={this.state.criterionSummaryData}
-                current_tags={this.state.current_tags}
-                due_date={this.state.due_date}
-                handleCreateTagButtonClick={this.handleCreateTagButtonClick}
-                extra_marks={this.state.extra_marks}
-                extraMarkSubtotal={this.state.extraMarkSubtotal}
-                grace_token_deductions={this.state.grace_token_deductions}
-                is_reviewer={this.state.is_reviewer}
-                marks={this.state.marks}
-                notes_count={this.state.notes_count}
-                old_marks={this.state.old_marks}
-                old_total={this.state.old_total}
-                released_to_students={this.state.released_to_students}
-                remark_submitted={this.state.remark_submitted}
-                revertToAutomaticDeductions={this.revertToAutomaticDeductions}
-                submission_time={this.state.submission_time}
-                subtotal={this.state.subtotal}
-                total={this.state.total}
-                updateMark={this.updateMark}
-                destroyMark={this.destroyMark}
-                createExtraMark={this.createExtraMark}
-                destroyExtraMark={this.destroyExtraMark}
-                deleteGraceTokenDeduction={this.deleteGraceTokenDeduction}
-                addTag={this.addTag}
-                removeTag={this.removeTag}
-                newNote={this.newNote}
-                findDeductiveAnnotation={this.findDeductiveAnnotation}
-                course_id={this.props.course_id}
-              />
+          <SubmissionSelector
+            key="submission-selector"
+            can_release={this.state.can_release}
+            assignment_max_mark={this.state.assignment_max_mark}
+            fullscreen={this.state.fullscreen}
+            group_name={this.state.group_name}
+            marks={this.state.marks || []}
+            marking_state={this.state.marking_state}
+            num_marked={this.state.num_marked}
+            num_collected={this.state.num_collected}
+            released_to_students={this.state.released_to_students}
+            total={this.state.total}
+            toggleFullscreen={this.toggleFullscreen}
+            toggleMarkingState={this.toggleMarkingState}
+            setReleasedToStudents={this.setReleasedToStudents}
+            nextSubmission={this.nextSubmission(1)}
+            randomIncompleteSubmission={this.randomIncompleteSubmission}
+            previousSubmission={this.nextSubmission(-1)}
+            filterData={this.state.filterData}
+            updateFilterData={this.updateFilterData}
+            clearAllFilters={this.resetFilterData}
+            sections={this.state.sections}
+            tas={this.state.tas}
+            available_tags={this.state.available_tags}
+            current_tags={this.state.current_tags}
+            loading={this.state.loading}
+            criterionSummaryData={this.state.criterionSummaryData}
+          />
+          <div key="panes-content" id="panes-content">
+            <CreateTagModal
+              isOpen={this.state.isCreateTagModalOpen}
+              onRequestClose={this.closeCreateTagModal}
+            />
+            <div id="panes">
+              <div id="left-pane">
+                <LeftPane
+                  ref={this.leftPane}
+                  loading={this.state.loading}
+                  allow_remarks={this.state.allow_remarks}
+                  annotation_categories={this.state.annotation_categories || []}
+                  annotations={this.state.annotations || []}
+                  assignment_remark_message={this.state.assignment_remark_message}
+                  update_overall_comment={this.updateOverallComment}
+                  can_run_tests={this.state.can_run_tests}
+                  detailed_annotations={this.state.detailed_annotations}
+                  enable_test={this.state.enable_test}
+                  feedback_files={this.state.feedback_files}
+                  instructor_run={this.state.instructor_run}
+                  overall_comment={this.state.overall_comment}
+                  past_remark_due_date={this.state.past_remark_due_date}
+                  released_to_students={this.state.released_to_students}
+                  remark_due_date={this.state.remark_due_date}
+                  remark_overall_comment={this.state.remark_overall_comment}
+                  remark_request_text={this.state.remark_request_text}
+                  remark_request_timestamp={this.state.remark_request_timestamp}
+                  remark_submitted={this.state.remark_submitted}
+                  revision_identifier={this.state.revision_identifier}
+                  submission_files={this.state.submission_files}
+                  student_view={this.props.role === "Student"}
+                  newAnnotation={this.newAnnotation}
+                  addAnnotation={this.addAnnotation}
+                  addExistingAnnotation={this.addExistingAnnotation}
+                  editAnnotation={this.editAnnotation}
+                  updateAnnotation={this.updateAnnotation}
+                  removeAnnotation={this.removeAnnotation}
+                  destroyAnnotation={this.destroyAnnotation}
+                />
+              </div>
+              <div id="drag" />
+              <div id="right-pane">
+                <RightPane
+                  members={this.state.members || []}
+                  annotations={this.state.annotations}
+                  assigned_criteria={this.state.assigned_criteria}
+                  assignment_max_mark={this.state.assignment_max_mark}
+                  available_tags={this.state.available_tags}
+                  criterionSummaryData={this.state.criterionSummaryData}
+                  current_tags={this.state.current_tags}
+                  due_date={this.state.due_date}
+                  handleCreateTagButtonClick={this.handleCreateTagButtonClick}
+                  extra_marks={this.state.extra_marks}
+                  extraMarkSubtotal={this.state.extraMarkSubtotal}
+                  grace_token_deductions={this.state.grace_token_deductions}
+                  marks={this.state.marks}
+                  notes_count={this.state.notes_count}
+                  old_marks={this.state.old_marks}
+                  old_total={this.state.old_total}
+                  released_to_students={this.state.released_to_students}
+                  remark_submitted={this.state.remark_submitted}
+                  revertToAutomaticDeductions={this.revertToAutomaticDeductions}
+                  submission_time={this.state.submission_time}
+                  subtotal={this.state.subtotal}
+                  total={this.state.total}
+                  updateMark={this.updateMark}
+                  destroyMark={this.destroyMark}
+                  createExtraMark={this.createExtraMark}
+                  destroyExtraMark={this.destroyExtraMark}
+                  deleteGraceTokenDeduction={this.deleteGraceTokenDeduction}
+                  addTag={this.addTag}
+                  removeTag={this.removeTag}
+                  newNote={this.newNote}
+                  findDeductiveAnnotation={this.findDeductiveAnnotation}
+                />
+              </div>
             </div>
           </div>
-        </div>
+        </ResultContext.Provider>
       </React.Fragment>
     );
   }
diff --git a/app/javascript/Components/Result/result_context.js b/app/javascript/Components/Result/result_context.js
new file mode 100644
index 0000000000..aeef8ae890
--- /dev/null
+++ b/app/javascript/Components/Result/result_context.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+// This needs to be in its own file to avoid circular dependency.
+export const ResultContext = React.createContext({
+  assignment_id: null,
+  submission_id: null,
+  result_id: null,
+  grouping_id: null,
+  course_id: null,
+  role: null,
+  is_reviewer: null,
+});
diff --git a/app/javascript/Components/Result/right_pane.jsx b/app/javascript/Components/Result/right_pane.jsx
index 0be3c78200..beaaecbcb3 100644
--- a/app/javascript/Components/Result/right_pane.jsx
+++ b/app/javascript/Components/Result/right_pane.jsx
@@ -4,10 +4,13 @@ import {Tab, Tabs, TabList, TabPanel} from "react-tabs";
 import {MarksPanel} from "./marks_panel";
 import {SummaryPanel} from "./summary_panel";
 import {SubmissionInfoPanel} from "./submission_info_panel";
+import {ResultContext} from "./result_context";
 
 export class RightPane extends React.Component {
+  static contextType = ResultContext;
+
   canShowSubmissionInfoPanel = () => {
-    return this.props.role !== "Student" && !this.props.is_reviewer;
+    return this.context.role !== "Student" && !this.context.is_reviewer;
   };
 
   render() {
@@ -29,7 +32,6 @@ export class RightPane extends React.Component {
             destroyMark={this.props.destroyMark}
             revertToAutomaticDeductions={this.props.revertToAutomaticDeductions}
             findDeductiveAnnotation={this.props.findDeductiveAnnotation}
-            course_id={this.props.course_id}
           />
         </TabPanel>
         <TabPanel>
@@ -38,7 +40,6 @@ export class RightPane extends React.Component {
             marks={this.props.marks}
             released_to_students={this.props.released_to_students}
             remark_submitted={this.props.remark_submitted}
-            is_reviewer={this.props.is_reviewer}
             assignment_max_mark={this.props.assignment_max_mark}
             old_total={this.props.old_total}
             total={this.props.total}
@@ -50,7 +51,6 @@ export class RightPane extends React.Component {
             deleteGraceTokenDeduction={this.props.deleteGraceTokenDeduction}
             createExtraMark={this.props.createExtraMark}
             destroyExtraMark={this.props.destroyExtraMark}
-            course_id={this.props.course_id}
           />
         </TabPanel>
         {this.canShowSubmissionInfoPanel() && (
@@ -66,11 +66,7 @@ export class RightPane extends React.Component {
               addTag={this.props.addTag}
               removeTag={this.props.removeTag}
               newNote={this.props.newNote}
-              role={this.props.role}
-              assignment_id={this.props.assignment_id}
-              grouping_id={this.props.grouping_id}
               members={this.props.members}
-              course_id={this.props.course_id}
             />
           </TabPanel>
         )}
diff --git a/app/javascript/Components/Result/submission_file_panel.jsx b/app/javascript/Components/Result/submission_file_panel.jsx
index f53a63e940..4b12b4333d 100644
--- a/app/javascript/Components/Result/submission_file_panel.jsx
+++ b/app/javascript/Components/Result/submission_file_panel.jsx
@@ -206,7 +206,6 @@ export class SubmissionFilePanel extends React.Component {
             fileData={this.props.fileData}
             onSelectFile={this.selectFile}
             selectedFile={this.state.selectedFile}
-            course_id={this.props.course_id}
           />
           {this.props.canDownload && (
             <button onClick={() => this.modalDownload.open()}>{I18n.t("download")}</button>
@@ -216,7 +215,6 @@ export class SubmissionFilePanel extends React.Component {
               categories={this.props.annotation_categories}
               newAnnotation={this.props.newAnnotation}
               addExistingAnnotation={this.props.addExistingAnnotation}
-              course_id={this.props.course_id}
             />
           )}
         </div>
diff --git a/app/javascript/Components/Result/submission_info_panel.jsx b/app/javascript/Components/Result/submission_info_panel.jsx
index 79debd08c0..d5a179de15 100644
--- a/app/javascript/Components/Result/submission_info_panel.jsx
+++ b/app/javascript/Components/Result/submission_info_panel.jsx
@@ -1,6 +1,9 @@
 import React from "react";
+import {ResultContext} from "./result_context";
 
 export class SubmissionInfoPanel extends React.Component {
+  static contextType = ResultContext;
+
   static defaultProps = {
     availableTags: [],
     currentTags: [],
@@ -51,7 +54,7 @@ export class SubmissionInfoPanel extends React.Component {
         <ul className="tag-list">{this.renderTagList()}</ul>
         <h3>{I18n.t("tags.results.available_tags")}</h3>
         <ul className="tag-list">{this.renderAvailableTags()}</ul>
-        {this.props.role === "Instructor" && (
+        {this.context.role === "Instructor" && (
           <p>
             <button className="inline-button" onClick={this.props.handleCreateTagButtonClick}>
               {I18n.t("helpers.submit.create", {
@@ -69,10 +72,10 @@ export class SubmissionInfoPanel extends React.Component {
         <p>
           <a
             href={Routes.repo_browser_course_assignment_submissions_path(
-              this.props.course_id,
-              this.props.assignment_id,
+              this.context.course_id,
+              this.context.assignment_id,
               {
-                grouping_id: this.props.grouping_id,
+                grouping_id: this.context.grouping_id,
               }
             )}
           >
diff --git a/app/javascript/Components/Result/submission_selector.jsx b/app/javascript/Components/Result/submission_selector.jsx
index a1bef0da93..8e1be9dc0e 100644
--- a/app/javascript/Components/Result/submission_selector.jsx
+++ b/app/javascript/Components/Result/submission_selector.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {FilterModal} from "../Modals/filter_modal";
+import {ResultContext} from "./result_context";
 
 export class SubmissionSelector extends React.Component {
   constructor(props) {
@@ -11,6 +12,8 @@ export class SubmissionSelector extends React.Component {
     };
   }
 
+  static contextType = ResultContext;
+
   renderToggleMarkingStateButton = () => {
     let buttonText, className, disabled, icon;
     if (this.props.marking_state === "complete") {
@@ -102,11 +105,11 @@ export class SubmissionSelector extends React.Component {
   }
 
   renderPrintButton() {
-    if (!this.props.is_reviewer) {
+    if (!this.context.is_reviewer) {
       return (
         <a
           className={"button"}
-          href={Routes.print_course_result_path(this.props.course_id, this.props.result_id)}
+          href={Routes.print_course_result_path(this.context.course_id, this.context.result_id)}
           style={{alignSelf: "flex-end"}}
           title={I18n.t("results.print")}
         >
@@ -122,7 +125,7 @@ export class SubmissionSelector extends React.Component {
   };
 
   renderFilterButton() {
-    if (this.props.role !== "Student") {
+    if (this.context.role !== "Student") {
       return (
         <button
           className="button filter"
@@ -136,7 +139,7 @@ export class SubmissionSelector extends React.Component {
   }
 
   renderRandomIncompleteSubmissionButton() {
-    if (this.props.role !== "Student") {
+    if (this.context.role !== "Student") {
       return (
         <button
           className="button random-incomplete-submission"
@@ -151,7 +154,7 @@ export class SubmissionSelector extends React.Component {
   }
 
   renderFilterModal() {
-    if (this.props.role !== "Student") {
+    if (this.context.role !== "Student") {
       return (
         <div>
           <FilterModal
@@ -165,7 +168,6 @@ export class SubmissionSelector extends React.Component {
             available_tags={this.props.available_tags}
             current_tags={this.props.current_tags}
             loading={this.props.loading}
-            role={this.props.role}
             criterionSummaryData={this.props.criterionSummaryData}
           />
         </div>
@@ -174,7 +176,7 @@ export class SubmissionSelector extends React.Component {
   }
 
   render() {
-    if (this.props.role === "Student" && !this.props.is_reviewer) {
+    if (this.context.role === "Student" && !this.context.is_reviewer) {
       return "";
     }
 
@@ -239,10 +241,8 @@ export class SubmissionSelector extends React.Component {
 SubmissionSelector.propTypes = {
   assignment_max_mark: PropTypes.number,
   can_release: PropTypes.bool,
-  course_id: PropTypes.number.isRequired,
   fullscreen: PropTypes.bool,
   group_name: PropTypes.string,
-  is_reviewer: PropTypes.bool,
   marking_state: PropTypes.string,
   marks: PropTypes.arrayOf(PropTypes.object),
   nextSubmission: PropTypes.func,
@@ -250,8 +250,6 @@ SubmissionSelector.propTypes = {
   num_marked: PropTypes.number,
   previousSubmission: PropTypes.func,
   released_to_students: PropTypes.bool,
-  result_id: PropTypes.number.isRequired,
-  role: PropTypes.string,
   setReleasedToStudents: PropTypes.func,
   toggleFullscreen: PropTypes.func,
   toggleMarkingState: PropTypes.func,
diff --git a/app/javascript/Components/Result/summary_panel.jsx b/app/javascript/Components/Result/summary_panel.jsx
index 21e0341766..46b0dfeba8 100644
--- a/app/javascript/Components/Result/summary_panel.jsx
+++ b/app/javascript/Components/Result/summary_panel.jsx
@@ -1,10 +1,12 @@
 import React from "react";
-import {render} from "react-dom";
 import ReactTable from "react-table";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {DataChart} from "../Helpers/data_chart";
+import {ResultContext} from "./result_context";
 
 export class SummaryPanel extends React.Component {
+  static contextType = ResultContext;
+
   static defaultProps = {
     criterionSummaryData: [],
     extra_marks: [],
@@ -205,7 +207,7 @@ export class SummaryPanel extends React.Component {
   renderExtraMarks = () => {
     // If there are no extra marks and this result is released, display nothing.
     if (
-      this.props.is_reviewer ||
+      this.context.is_reviewer ||
       (this.props.released_to_students && this.props.extra_marks.length === 0)
     ) {
       return "";
@@ -247,7 +249,7 @@ export class SummaryPanel extends React.Component {
   };
 
   renderGraceTokenDeductions = () => {
-    if (this.props.is_reviewer || this.props.graceTokenDeductions.length === 0) {
+    if (this.context.is_reviewer || this.props.graceTokenDeductions.length === 0) {
       return "";
     } else {
       let rows = this.props.graceTokenDeductions.flatMap(d => {
diff --git a/app/javascript/Components/__tests__/create_tag_modal.test.jsx b/app/javascript/Components/__tests__/create_tag_modal.test.jsx
index c96dde6abc..ee9a8eaf8a 100644
--- a/app/javascript/Components/__tests__/create_tag_modal.test.jsx
+++ b/app/javascript/Components/__tests__/create_tag_modal.test.jsx
@@ -3,6 +3,8 @@ import {render, screen, fireEvent, waitFor} from "@testing-library/react";
 import CreateTagModal from "../Modals/create_tag_modal";
 import Modal from "react-modal";
 import fetchMock from "jest-fetch-mock";
+import {ResultContext} from "../Result/result_context";
+import {DEFAULT_RESULT_CONTEXT_VALUE, renderInResultContext} from "./result_context_renderer";
 
 describe("CreateTagModal", () => {
   let props;
@@ -21,14 +23,12 @@ describe("CreateTagModal", () => {
     props = {
       isOpen: true,
       onRequestClose: jest.fn().mockImplementation(() => (props.isOpen = false)),
-      grouping_id: 1,
-      course_id: 1,
-      assignment_id: 1,
     };
 
     // Set the app element for React Modal
     Modal.setAppElement("body");
-    component = render(<CreateTagModal {...props} />);
+
+    component = renderInResultContext(<CreateTagModal {...props} />, {role: "Student"});
 
     // Enable submit
     tagName = "Name";
@@ -46,7 +46,7 @@ describe("CreateTagModal", () => {
         name: tagName,
         description: "",
       },
-      grouping_id: props.grouping_id,
+      grouping_id: DEFAULT_RESULT_CONTEXT_VALUE.grouping_id,
     };
     const options = {
       method: "POST",
@@ -58,7 +58,9 @@ describe("CreateTagModal", () => {
     };
     fetchMock.mockOnce(async req => {
       expect(req.url).toEqual(
-        Routes.course_tags_path(props.course_id, {assignment_id: props.assignment_id})
+        Routes.course_tags_path(DEFAULT_RESULT_CONTEXT_VALUE.course_id, {
+          assignment_id: DEFAULT_RESULT_CONTEXT_VALUE.assignment_id,
+        })
       );
       expect(req.method).toBe(options.method);
       expect(req.headers.get("Content-Type")).toEqual(options.headers["Content-Type"]);
diff --git a/app/javascript/Components/__tests__/filter_modal.test.jsx b/app/javascript/Components/__tests__/filter_modal.test.jsx
index 5bf75e0285..e5c5f63039 100644
--- a/app/javascript/Components/__tests__/filter_modal.test.jsx
+++ b/app/javascript/Components/__tests__/filter_modal.test.jsx
@@ -2,6 +2,8 @@ import * as React from "react";
 import {render, screen, fireEvent, within} from "@testing-library/react";
 import {FilterModal} from "../Modals/filter_modal";
 import Modal from "react-modal";
+import {ResultContext} from "../Result/result_context";
+import {renderInResultContext} from "./result_context_renderer";
 
 jest.mock("@fortawesome/react-fontawesome", () => ({
   FontAwesomeIcon: () => {
@@ -52,7 +54,6 @@ describe("FilterModal", () => {
         onRequestClose: jest.fn().mockImplementation(() => (props.isOpen = false)),
         updateFilterData: jest.fn().mockImplementation(() => null),
         clearAllFilters: jest.fn().mockImplementation(() => null),
-        role: role,
         criterionSummaryData: [
           {criterion: "a"},
           {criterion: "b"},
@@ -64,7 +65,8 @@ describe("FilterModal", () => {
 
       // Set the app element for React Modal
       Modal.setAppElement("body");
-      component = render(<FilterModal {...props} />);
+
+      component = renderInResultContext(<FilterModal {...props} />, {role: role});
     });
 
     it("should close on submit", () => {
diff --git a/app/javascript/Components/__tests__/markdown_editor.test.jsx b/app/javascript/Components/__tests__/markdown_editor.test.jsx
index d4b919237a..14cdb75255 100644
--- a/app/javascript/Components/__tests__/markdown_editor.test.jsx
+++ b/app/javascript/Components/__tests__/markdown_editor.test.jsx
@@ -2,6 +2,8 @@ import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import MarkdownEditor from "../markdown_editor";
+import {ResultContext} from "../Result/result_context";
+import {renderInResultContext} from "./result_context_renderer";
 
 const basicProps = {
   content: "",
@@ -20,7 +22,7 @@ describe("MarkdownEditor", () => {
   });
 
   it("should properly handle the text input change", async () => {
-    render(<MarkdownEditor {...props} />);
+    renderInResultContext(<MarkdownEditor {...props} />);
 
     const inputBox = screen.getByRole("textbox");
     await userEvent.type(inputBox, "Hello world");
@@ -31,7 +33,7 @@ describe("MarkdownEditor", () => {
   it("should show autocomplete if desired", async () => {
     props.show_autocomplete = true;
     props.annotation_text_id = "id";
-    render(<MarkdownEditor {...props} />);
+    renderInResultContext(<MarkdownEditor {...props} />);
 
     const autocompleteList = screen.queryByTestId("markdown-editor-autocomplete-root");
     expect(autocompleteList).toBeTruthy();
@@ -39,7 +41,7 @@ describe("MarkdownEditor", () => {
 
   it("should properly display and pass down props to the preview tab", async () => {
     props.content = "arma virumque cano";
-    render(<MarkdownEditor {...props} />);
+    renderInResultContext(<MarkdownEditor {...props} />);
 
     await userEvent.click(screen.getByRole("tab", {name: "Preview"}));
 
diff --git a/app/javascript/Components/__tests__/result_context_renderer.js b/app/javascript/Components/__tests__/result_context_renderer.js
new file mode 100644
index 0000000000..cad2df88cf
--- /dev/null
+++ b/app/javascript/Components/__tests__/result_context_renderer.js
@@ -0,0 +1,24 @@
+import {render} from "@testing-library/react";
+import {ResultContext} from "../Result/result_context";
+
+export const DEFAULT_RESULT_CONTEXT_VALUE = {
+  result_id: 1,
+  submission_id: 1,
+  assignment_id: 1,
+  grouping_id: 1,
+  course_id: 1,
+  role: "user",
+  is_reviewer: true,
+};
+
+export function renderInResultContext(ui, contextValue = {}, renderOptions = {}) {
+  const mergedContextValue = {
+    ...DEFAULT_RESULT_CONTEXT_VALUE,
+    ...contextValue,
+  };
+
+  return render(
+    <ResultContext.Provider value={mergedContextValue}>{ui}</ResultContext.Provider>,
+    renderOptions
+  );
+}
diff --git a/app/javascript/Components/__tests__/submission_selector.test.jsx b/app/javascript/Components/__tests__/submission_selector.test.jsx
index 348ecd1479..73d0811a39 100644
--- a/app/javascript/Components/__tests__/submission_selector.test.jsx
+++ b/app/javascript/Components/__tests__/submission_selector.test.jsx
@@ -2,6 +2,8 @@ import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {SubmissionSelector} from "../Result/submission_selector";
+import {ResultContext} from "../Result/result_context";
+import {renderInResultContext} from "./result_context_renderer";
 
 let props;
 const INITIAL_FILTER_MODAL_STATE = {
@@ -27,13 +29,11 @@ const basicProps = {
   assignment_max_mark: 100,
   available_tags: [],
   can_release: false,
-  course_id: 1,
   criterionSummaryData: [],
   current_tags: [],
   filterData: INITIAL_FILTER_MODAL_STATE,
   fullscreen: false,
   group_name: "group",
-  is_reviewer: false,
   marking_state: "incomplete",
   marks: [],
   nextSubmission: jest.fn(),
@@ -41,8 +41,6 @@ const basicProps = {
   num_marked: 0,
   previousSubmission: jest.fn(),
   released_to_students: false,
-  result_id: 1,
-  role: "user",
   sections: [],
   setReleasedToStudents: jest.fn().mockImplementation(() => (props.released_to_students = true)),
   toggleFullscreen: jest.fn().mockImplementation(() => (props.fullscreen = !props.fullscreen)),
@@ -60,13 +58,12 @@ describe("SubmissionSelector", () => {
   });
 
   it("should not show anything if it is being viewed by a non-reviewer student", () => {
-    props.role = "Student";
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />, {role: "Student", is_reviewer: false});
     expect(screen.queryByTestId("submission-selector-container")).toBeNull();
   });
 
   it("should call nextSubmission when the next-button is pressed", async () => {
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     const button = screen.getByTitle(I18n.t("results.next_submission"), {exact: false});
     await userEvent.click(button);
 
@@ -74,7 +71,7 @@ describe("SubmissionSelector", () => {
   });
 
   it("should call previousSubmission when the next-button is pressed", async () => {
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     const button = screen.getByTitle(I18n.t("results.previous_submission"), {exact: false});
     await userEvent.click(button);
 
@@ -82,12 +79,12 @@ describe("SubmissionSelector", () => {
   });
 
   it("should display the group name", () => {
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     expect(screen.getByText(props.group_name)).toBeTruthy();
   });
 
   it("should show filter modal when filter-button is pressed", async () => {
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     const button = screen.getByTitle(I18n.t("results.filter_submissions"));
     await userEvent.click(button);
 
@@ -98,7 +95,7 @@ describe("SubmissionSelector", () => {
   it("should pass correct values to the progress meter", () => {
     props.num_marked = 50;
     props.num_collected = 100;
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     const meter = screen.getByTestId("progress-bar");
     expect(meter).toHaveAttribute("value", String(props.num_marked));
     expect(meter).toHaveAttribute("min", "0");
@@ -112,7 +109,7 @@ describe("SubmissionSelector", () => {
   it("should display the total correctly", () => {
     props.total = 50;
     props.assignment_max_mark = 100;
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     const expected_display = `${Math.round(props.total * 100) / 100} / ${
       props.assignment_max_mark
     }`;
@@ -120,7 +117,7 @@ describe("SubmissionSelector", () => {
   });
 
   it("can toggle into fullscreen", async () => {
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     const button = screen.getByTitle(I18n.t("results.fullscreen_enter"), {exact: false});
     await userEvent.click(button);
 
@@ -129,7 +126,7 @@ describe("SubmissionSelector", () => {
 
   it("can toggle out of fullscreen", async () => {
     props.fullscreen = true;
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     const button = screen.getByTitle(I18n.t("results.fullscreen_exit"), {exact: false});
     await userEvent.click(button);
 
@@ -138,14 +135,14 @@ describe("SubmissionSelector", () => {
 
   it("should not allow release if can_release is false", () => {
     props.can_release = false;
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     expect(screen.queryByText(I18n.t("submissions.release_marks"))).toBeNull();
   });
 
   it("should set the text as unrelease if it has already been released", () => {
     props.released_to_students = true;
     props.can_release = true;
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     const element = screen.queryByRole("button", {name: I18n.t("submissions.unrelease_marks")});
     expect(element).toBeTruthy();
   });
@@ -153,7 +150,7 @@ describe("SubmissionSelector", () => {
   it("should set the text as release if it has not already been released and disable it if marking state is not complete", () => {
     props.released_to_students = false;
     props.can_release = true;
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     const element = screen.getByRole("button", {name: I18n.t("submissions.release_marks")});
     expect(element).toBeDisabled();
   });
@@ -162,7 +159,7 @@ describe("SubmissionSelector", () => {
     props.released_to_students = false;
     props.can_release = true;
     props.marking_state = "complete";
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     const element = screen.getByRole("button", {name: I18n.t("submissions.release_marks")});
     expect(element).toBeEnabled();
   });
@@ -171,7 +168,7 @@ describe("SubmissionSelector", () => {
     props.marking_state = "complete";
     props.released_to_students = false;
     props.can_release = true;
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
     const element = screen.getByRole("button", {name: I18n.t("submissions.release_marks")});
     await userEvent.click(element);
 
@@ -181,7 +178,7 @@ describe("SubmissionSelector", () => {
   it("should have the marking state button function as expected when marking_state is complete", () => {
     props.marking_state = "complete";
     props.released_to_students = false;
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
 
     const button = screen.queryByRole("button", {name: I18n.t("results.set_to_incomplete")});
     expect(button).toBeTruthy();
@@ -190,7 +187,7 @@ describe("SubmissionSelector", () => {
 
   it("should have the marking state button function as expected when marking_state is incomplete", () => {
     props.marking_state = "incomplete";
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
 
     const button = screen.queryByRole("button", {name: I18n.t("results.set_to_complete")});
     expect(button).toBeTruthy();
@@ -199,7 +196,7 @@ describe("SubmissionSelector", () => {
   it("should have the marking state button enabled if props.marks have no unmarked marks and marking_state is incomplete", () => {
     props.marking_state = "incomplete";
     props.marks = [{mark: 5}];
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
 
     const button = screen.queryByRole("button", {name: I18n.t("results.set_to_complete")});
     expect(button).toBeEnabled();
@@ -208,7 +205,7 @@ describe("SubmissionSelector", () => {
   it("should have the marking state button disabled if props.marks has at least 1 mark with no mark and marking_state is incomplete", () => {
     props.marking_state = "incomplete";
     props.marks = [{mark: 5}, {mark: null}];
-    render(<SubmissionSelector {...props} />);
+    renderInResultContext(<SubmissionSelector {...props} />);
 
     const button = screen.queryByRole("button", {name: I18n.t("results.set_to_complete")});
     expect(button).toBeDisabled();