How to embed text/html in react component?

Question

I'm trying to embedding text/html in a react Modal component. But when I run my app with electron the Google Inspector show me some errors.

Uncaught invariant.js:38 Uncaught Invariant Violation: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by Example.

SOLUTION : Replace the <object> by <webview>

this is my code

import React from 'react';
import SkyLight from 'react-skylight';

class Example extends React.Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div>
        <section>
          <h1>React SkyLight</h1>
          <button onClick={() => this.refs.simpleDialog.show()}>Ouvrez le modal</button>
        </section>
        <SkyLight  hideOnOverlayClicked ref="simpleDialog" title="Hi, I'm a simple modal">
          <object type="text/html" data="http://www.example.com" style="width:100%; height:100%">
            <p>backup content</p>
          </object>
        </SkyLight>
      </div>
    )
  }
}

Example.displayName = 'Example';

export default Example;

Answer 1

try to change this line

<object type="text/html" data="http://www.example.com" style="width:100%; height:100%">

with this

    <object type="text/html" data="http://www.example.com" 
style={{width:'100%', height:'100%'}}>

the style attribute expects a json object, for more details you can check this link https://facebook.github.io/react/docs/dom-elements.html#style