import React from "react";
import { Map } from "immutable";
import { renderHTML } from "../../../util/render-html";

import css from "../../../../css/portal-dashboard/questions/multiple-choice-question.less";
import ReportItemIframe from "../report-item-iframe";

interface IProps {
  question?: Map<string, any>;
  useMinHeight?: boolean;
}

export const IframeQuestion: React.FC<IProps> = (props) => {
  const { question, useMinHeight } = props;
  const prompt = question?.get("prompt");
  const blankRegEx = /\[([^)]+)\]/g;
  const promptText = prompt?.replace(blankRegEx,'__________');

  return (
    <div className={css.questionText}>
      {prompt && renderHTML(promptText)}
      {question && question.get("reportItemUrl") && <ReportItemIframe question={question} view={useMinHeight ? "singleAnswer" : "multipleAnswer"} />}
    </div>
  );
};

import React from "react";
import { Map } from "immutable";
import { renderHTML } from "../../../util/render-html";

import css from "../../../../css/portal-dashboard/questions/multiple-choice-question.less";
import ReportItemIframe from "../report-item-iframe";

interface IProps {
  question?: Map<string, any>;
  useMinHeight?: boolean;
}

export const IframeQuestion: React.FC<IProps> = (props) => {
  const { question, useMinHeight } = props;
  const prompt = question?.get("prompt");
  const blankRegEx = /\[([^)]+)\]/g;
  const promptText = prompt?.replace(blankRegEx,'__________');

  return (
    <div className={css.questionText}>
      {prompt && renderHTML(promptText)}
      {question && question.get("reportItemUrl") && <ReportItemIframe key={question.get("id")} question={question} view={useMinHeight ? "singleAnswer" : "multipleAnswer"} />}
    </div>
  );
};

Add a key property to `ReportItemIframe` for each question.
Add a key property to `ReportItemIframe` for each question.

Without the key property the Iframe content is not reliably updating when question selection changes.

[#180647562]
https://www.pivotaltracker.com/n/projects/2441249
