render html file with script in react app

Question

I have a html file with script tag and some link into it. when i render it with html file it bring the result i mean a chart but when i render it in react js app wiht dangerouslySetInnerHTML it does not render and does not bring my chart.

this is my html code that i take it from backend(api)

  const html =  `<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<link
  href="somelink"
  rel="stylesheet"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="app-chart-container">
  <canvas class="app-charts" id="line-chart-40197" dir="ltr"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
  $(document).ready(function () {
    $("[data-toggle='tooltip']").tooltip({ placement: "right" });
  });
  var ctx = document.getElementById("line-chart-40197");
  if (ctx) {
    ctx.height = 300;
    var myChart = new Chart(ctx, {
      type: "line",
      data: {
        labels: [
          "92/3",
          "92/6",
          "92/9",
          "92/12",
          "93/3",
          "93/6",
          "93/9",
          "93/12",
          "94/3",
          "94/6",
          "94/9",
          "94/12",
          "95/3",
          "95/6",
          "95/9",
          "95/12",
          "96/3",
          "96/6",
          "96/9",
          "96/12",
          "97/3",
          "97/6",
          "97/9",
          "97/12",
          "98/3",
          "98/6",
          "98/9",
          "98/12",
          "99/3",
          "99/6",
        ],
        type: "line",
        defaultFontFamily: "VazirFD",
        datasets: [
          {
            label: "شرکت",
            data: [
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "-262",
              "-262",
              "-262",
              "-262",
              "66793",
              "70787",
              "122463",
              "591087",
              "591088",
              "597421",
              "600635",
              "614257",
              "1304086",
              "1320727",
              "1352606",
              "2830629",
              "3016812",
              "3042351",
              "3126253",
            ],
            backgroundColor: "transparent",
            borderColor: "#9d0606",
            borderWidth: 2,
            pointStyle: "circle",
            pointRadius: 3,
            pointBorderColor: "transparent",
            pointBackgroundColor: "#9d0606",
            type: "line",
          },
        ],
      },
      options: {
        responsive: true,
        tooltips: {
          mode: "index",
          titleFontSize: 12,
          titleFontColor: "#000",
          bodyFontColor: "#000",
          backgroundColor: "#fff",
          defaultFontFamily: "VazirFD",
          titleFontFamily: "VazirFD",
          bodyFontFamily: "VazirFD",
          cornerRadius: 3,
          intersect: true,
          callbacks: {
            label: function (tooltipItem, data) {
              return (
                data.datasets[tooltipItem.datasetIndex].label +
                " : " +
                tooltipItem.yLabel
                  .toString()
                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
              );
            },
          },
        },
        legend: {
          display: true,
          rtl: true,
          labels: {
            usePointStyle: true,
            fontFamily: "VazirFD",
          },
        },
        scales: {
          xAxes: [
            {
              stacked: false,
              display: true,
              gridLines: {
                display: true,
                drawBorder: false,
              },
              scaleLabel: {
                display: true,
                labelString: "سال مالی",
                fontFamily: "VazirFD",
              },
              ticks: {
                fontFamily: "VazirFD",
                fontColor: "#9aa0ac",
                minRotation: 90,
                callback: function (value, index, values) {
                  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                },
              },
            },
          ],
          yAxes: [
            {
              stacked: false,
              display: true,
              gridLines: {
                display: true,
                drawBorder: false,
              },
              scaleLabel: {
                display: false,
                labelString: "میلیون ریال",
                fontFamily: "VazirFD",
              },
              ticks: {
                margin: 20,
                fontFamily: "VazirFD",
                fontColor: "#9aa0ac",
                minRotation: 0,
                callback: function (value, index, values) {
                  var processValue = value;
                  if (value >= 1000 && value < 1000000) {
                    processValue = value / 1e3 + "K";
                  } else if (value >= 1000000 && value < 1000000000) {
                    processValue = value / 1e6 + "M";
                  } else if (value >= 1000000000) {
                    processValue = value / 1e9 + "B";
                  } else if (value < 0 && value <= -1000 && value > -1000000) {
                    processValue = value / 1e3 + "K";
                  } else if (
                    value < 0 &&
                    value <= -1000000 &&
                    value > -1000000000
                  ) {
                    processValue = value / 1e6 + "M";
                  } else if (value < 0 && value <= -1000000000) {
                    processValue = value / 1e9 + "B";
                  }
                  return processValue
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                },
              },
            },
          ],
        },
        title: {
          display: true,
          text: "روند سودآوری TTM (میلیون ریال)",
          fontFamily: "VazirFD",
        },
      },
    });
  }
</script>

this is my html file. but i have a problem with render of that with react when I compile this file with

this is my react component that i want to render that html code (my html code has some script tag )

import React from "react";

export default function Dashboard() {
     return (
       <div dangerouslySetInnerHTML={{__html: html }} />
     )
}

  

i dont get my html file correctly. and react does not render it.

when i open this file into .html file it works but in react does not render any thing. how can i render this file in react please help me

Answer 1

I had to do this recently because an API I was consuming returns HTML content. You can use a library like html-to-react to parse the HTML for you and convert it to a React component that you can then use inside your React application. In my case, I created a component so that I can reuse this logic anywhere I need to display HTML content.

import { useMemo } from 'react';
import { Parser } from 'html-to-react';

const HTMLContent = (props) => {
  const htmlToReactParser = useMemo(() => new Parser(), []);
  const parsedHTML = htmlToReactParser.parse(props.html);

  return <div className={styles['blog-html-content']}>{parsedHTML}</div>;
};