The "something^somthing" is appearing as a plane text and not working as it to perform

Question

I am having an issue that I am using the griddle.js and handsontable in my react application and I have to display a value with sup tag. But the output is the plane text with //something<sup>somthing</sup> but instead it should show like sup tag

I mean the html tags are considered as plane text.

Any suggestion would be appreciated. Sorry, I am beginner in Ractjs

const base_price = 100;
extProps.results = 'something' + base_price.sup();  //something + <sup>100</sup> 

   <Griddle
    ref="griddle"
    resultsPerPage={resultsPerPage}
    table_value = { extProps.results}
  />

Answer 1

You can use dangerouslySetInnerHTML to render html elements

const base_price = 100;
extProps.results = <div dangerouslySetInnerHTML={{ __html: "something <sup>100</sup>" }} />;

   <Griddle
    ref="griddle"
    resultsPerPage={resultsPerPage}
    table_value = { extProps.results}
  />