1

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}
  />
Pritish Vaidya
  • 21,561
  • 3
  • 58
  • 76
Mohsin Younas
  • 21
  • 3

1 Answers1

0

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}
  />
Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162
  • Thank you for the ans. Further, I am getting this error, if you could help again :) **TypeError: Converting circular structure to JSON at Object.stringify ()** – Mohsin Younas Sep 16 '18 at 12:30
  • Where do you get that error? can you share that code – Hemadri Dasari Sep 16 '18 at 12:37
  • TypeError: Converting circular structure to JSON at Object.stringify () at stringify (eval at (app.js:6103), :4:26) at stateTransformer (eval at (app.js:5857), :103:51) at eval (eval at (app.js:9445), :113:30) at eval (eval at (app.js:8827), :22:18) at eval (eval at (app.js:9451), :47:20) at dispatch (eval at (app.js:9469), :45:18) at handleFulfill (eval at (app.js:9451), :138:11) – Mohsin Younas Sep 16 '18 at 12:47
  • Are you doing JSON.stringify() anywhere in your code? – Hemadri Dasari Sep 16 '18 at 12:50
  • No I am asking are you doing JSON.stringify() anywhere in your code? – Hemadri Dasari Sep 16 '18 at 12:57
  • Warning: Exception thrown by hook while handling onSetChildren: Invariant Violation: Expected onMountComponent() to fire for the child before its parent includes it in onSetChildren(). Invariant Violation: Expected onMountComponent() to fire for the child before its parent includes it in onSetChildren(). – Mohsin Younas Sep 16 '18 at 13:12
  • This is another waring. – Mohsin Younas Sep 16 '18 at 13:12
  • The problem is Griddle only except the string input while we are sending a non string input. – Mohsin Younas Sep 16 '18 at 13:32
  • Sorry I can't help because I don't no anything about Griddle. I helped to fix your original issue because I have knowledge about that. If you need solution for Griddle then post as a separate question and tag griddle library so that people who knows about it will help you – Hemadri Dasari Sep 16 '18 at 13:50