render html file with script in react app - html

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>;
};