[JS] Actions not working when renderer used via ReactJS

Target Platform

Please list the platform(s) that your application is targeting and remove platforms you are not targeting:

• ReactJS

Target Application

ReactJS chatbot using directline API

Problem Description

• Not able to perform any action when clicked on buttons, StackOverflow Post link
• Also, as the response was an object. In order to render object inside HTML, I am using <div dangerouslySetInnerHTML={{ __html: cardData?.innerHTML }}></div> while rendering. I was not able to render card directly inside div.

Card JSON

{
      "type": "AdaptiveCard",
      "version": "1.0",
      "body": [
          {
              "type": "Image",
              "url": "https://adaptivecards.io/content/adaptive-card-50.png"
          },
          {
              "type": "TextBlock",
              "text": "Hello **Adaptive Cards!**"
          }
      ],
      "actions": [
          {
              "type": "Action.OpenUrl",
              "title": "Learn more",
              "url": "https://adaptivecards.io"
          },
          {
              "type": "Action.OpenUrl",
              "title": "GitHub",
              "url": "https://github.com/Microsoft/AdaptiveCards"
          }
      ]
  };

Sample Code

import * as AdaptiveCards from "adaptivecards";
import {useState, useEffect} from 'react';


function AdaptiveCard() {

  const [cardData, setCardData] = useState()

  const {adaptiveCardData} = props
  
  useEffect(()=>{

    var card = {
      "type": "AdaptiveCard",
      "version": "1.0",
      "body": [
          {
              "type": "Image",
              "url": "https://adaptivecards.io/content/adaptive-card-50.png"
          },
          {
              "type": "TextBlock",
              "text": "Hello **Adaptive Cards!**"
          }
      ],
      "actions": [
          {
              "type": "Action.OpenUrl",
              "title": "Learn more",
              "url": "https://adaptivecards.io"
          },
          {
              "type": "Action.OpenUrl",
              "title": "GitHub",
              "url": "https://github.com/Microsoft/AdaptiveCards"
          }
      ]
  };
    
    var adaptiveCard = new AdaptiveCards.AdaptiveCard();
  
    adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
      fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
    });
  
    adaptiveCard.onExecuteAction = function (action) { alert("Ow!"); }
  
    adaptiveCard.parse(card);
  
    var renderedCard = adaptiveCard.render();
    
    setCardData(renderedCard)
  },[])

  return (
    <div>
      <h1>Hello world</h1>
      <div dangerouslySetInnerHTML={{ __html: cardData?.innerHTML }}></div>
    </div>
  );
}

export default AdaptiveCard;

Version of SDK

2.9.0

Start with the AdaptiveCard component and reproduce the provided ReactJS example using adaptivecards SDK 2.9.0. Inspect the result of adaptiveCard.render(), the dangerouslySetInnerHTML usage, and the onExecuteAction callback; done means the rendered card displays correctly and its OpenUrl actions invoke the expected behavior.