Inserting the iframe into react component

Question

I have a small problem  After requesting a data from a service I got an iframe code in response    lt iframe src  https   www example com show data     width  540  height  450  gt  lt  iframe gt    I would like to pass this in as a props to my modal component and display it but when I simply  this props iframe  it in the render function it is obviously displaying it as a string   What is the base way to display it as html in react

User · Answer

With ES6 you can now do it like this  Example Codepen URl to load   const iframe     lt iframe height  265  style  width  100    scrolling  no  title  fx   src    codepen io ycw embed JqwbQw  height 265 amp theme-id 0 amp default-tab js result  frameborder  no  allowtransparency  true  allowfullscreen  true  gt See the Pen  lt a href  https   codepen io ycw pen JqwbQw   gt fx  lt  a gt  by ycw  lt a href  https   codepen io ycw  gt  ycw lt  a gt   on  lt a href  https   codepen io  gt CodePen lt  a gt   lt  iframe gt       A function component to load Iframe  function Iframe props      return   lt div dangerouslySetInnerHTML      html   props iframe props iframe        gt        Usage   import React from  react   import ReactDOM from  react-dom   function App       return        lt div className  App  gt         lt h1 gt Iframe Demo lt  h1 gt         lt Iframe iframe  iframe    gt        lt  div gt          const rootElement   document getElementById  root    ReactDOM render  lt App   gt   rootElement     Edit on CodeSandbox   https   codesandbox io s react-iframe-demo-g3vst

User · Answer

You can use property dangerouslySetInnerHTML  like this   x000D   x000D  const Component   React createClass   x000D    iframe  function      x000D      return   x000D          html  this props iframe x000D        x000D       x000D   x000D    render  function     x000D      return   x000D         lt div gt  x000D           lt div dangerouslySetInnerHTML   this iframe       gt  x000D         lt  div gt  x000D         x000D      x000D      x000D   x000D  const iframe     lt iframe src  https   www example com show data     width  540  height  450  gt  lt  iframe gt     x000D   x000D  ReactDOM render  x000D     lt Component iframe  iframe    gt   x000D    document getElementById  container   x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  container  gt  lt  div gt  x000D   x000D   x000D    also  you can copy all attributes from the string based on the question  you get iframe as a string from a server  which contains  lt iframe gt  tag and pass it to new  lt iframe gt  tag  like that   x000D   x000D      x000D     getAttrs x000D     returns all attributes from TAG string x000D      return Object x000D      x000D  const getAttrs    iframeTag    gt    x000D    var doc   document createElement  div    x000D    doc innerHTML   iframeTag  x000D   x000D    const iframe   doc getElementsByTagName  iframe   0   x000D    return    slice x000D       call iframe attributes  x000D       reduce  attrs  element    gt    x000D        attrs element name    element value  x000D        return attrs  x000D              x000D    x000D   x000D  const Component   React createClass   x000D    render  function     x000D      return   x000D         lt div gt  x000D           lt iframe     getAttrs this props iframe      gt  x000D         lt  div gt  x000D         x000D      x000D      x000D   x000D  const iframe     lt iframe src  https   www example com show data     width  540  height  450  gt  lt  iframe gt     x000D   x000D  ReactDOM render  x000D     lt Component iframe  iframe    gt   x000D    document getElementById  container   x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  container  gt  lt div gt  x000D   x000D   x000D

User · Answer

If you don t want to use dangerouslySetInnerHTML then you can use the below mentioned solution   var Iframe   React createClass          render  function         return                  lt div gt                     lt iframe src  this props src  height  this props height  width  this props width   gt                  lt  div gt                 ReactDOM render     lt Iframe src  http   plnkr co   height  500  width  500   gt     document getElementById  example        here live demo is available Demo

[iframe] Inserting the iframe into react component

Examples related to iframe

Examples related to reactjs