DEV Community

Agik Setiawan
Agik Setiawan

Posted on

Render HTML tag in Next JS or React JS

If we use WYSIWYG Editor in our content usually it will be save as HTML in Database.

render HTML tag in React / Next JS very simply with 'dangerouslySetInnerHTML'

Example:

const content = `<b>Test Content</b>`;

<p dangerouslySetInnerHTML={{ __html: content }}></p>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
msadiq profile image
Muhammad Sadiq

I've got a chart tag gotten from trading view and I'm trying to render this using NextJs, Do you think this would work.
The div looks like this

<div class="tradingview-widget-container">
<div id="tradingview_35ba5"></div>
<div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/AAPL/" rel="noopener" target="_blank"><span class="blue-text">Apple</span></a> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.MediumWidget(
{
"symbols": [
[
"Apple",
"AAPL|1D"
],
[
"Google",
"GOOGL|1D"
],
[
"Microsoft",
"MSFT|1D"
]
],
"chartOnly": false,
"width": 1000,
"height": 500,
"locale": "en",
"colorTheme": "dark",
"autosize": false,
"showVolume": false,
"hideDateRanges": false,
"scalePosition": "right",
"scaleMode": "Normal",
"fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
"noTimeScale": false,
"valuesTracking": "1",
"chartType": "line",
"fontColor": "#787b86",
"gridLineColor": "rgba(240, 243, 250, 0.06)",
"backgroundColor": "#131722",
"container_id": "tradingview_35ba5"
}
);
</script>
</div>