Error “Invalid tag” on renderToStaticMarkup

Question

I am new to reactjs..

I am trying to render the component (jsx) using renderToStaticMarkup but I am getting the below error:

Error:

Invariant Violation: Invalid tag: <html data-reactroot="" data-reactid="1" data-re....

server.js (snippet)

var html = ReactDOMServer.renderToStaticMarkup(
            React.createElement(
            ReactDOMServer.renderToString(Component(props))
        ),
        script({dangerouslySetInnerHTML: {__html:
            'var APP_PROP = ' + safeStringify(props) + ';'
        }}),

      script({src: '//cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js'}),
      script({src: '//cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js'}),
      script({src: '/bundle.js'})

    )
        response.send(html)
    }

component.jsx

return(
        <html>
        <head></head>
        <body>
        <div>
            <ul>{values}</ul>
            <button onClick={this.handleClick}>Click Me!</button>
        </div>
        </body>
        </html>
        );
    }

Answer 1

The React.createElement accepts either a single string that can be an HTML tag (div, li, custom html tag) or a ReactClass of your component.

So you can do the following

  // Declaring the component (a stateless component in this case)
  const MyComponent = ({ onClickHndlr, children }) => (
    <html>
      <head></head>
      <body>
        <div>
          <ul>{children}</ul>
          <button onClick={onClickHndlr}>Click Me!</button>
        </div>
      </body>
    </html>
  );

  // Declaring my click function handler that I'll 
  // be passing it as a prop to the React.createElement method.
  const onClickHndlr = () => {}

  ReactDOMServer.renderToStaticMarkup(
    React.createElement(
      MyComponent, 
      { 
        onClickHndlr: onClickHndlr 
      }, 
      [ <li>first children</li>, <li>second children</li> ]
    )
  );

jsFiddle

Please, notice that i'm passing in an argument of type ReactClass (the stateless component MyComponent ) to the renderToStaticMarkup method.

You could as well use some JSX as argument, as you would normally in a component's render() method, like so:

ReactDOMServer.renderToStaticMarkup(
  <MyComponent onClickHndlr={onClickHndlr}>
    <li>first children</li>
    <li>second children</li>
  </MyComponent>
);

jsFiddle

Just keep in mind that JSX is (roughly) doing this conversion:

If the tag name is a string that maps to an HTML element, use the component class for that HTML element.

If the tag name is not an HTML element, assume it is a local variable name that points to a custom component class.

Attributes are converted into an object and passed as the second parameter.

Child elements are passed as the remaining parameters.

Extracted from React JS Tutorial and Guide to the Gotchas .

Error “Invalid tag” on renderToStaticMarkup

Question

1 answers

solution1
0 2016-10-06 23:25:45

Error “Invalid tag” on renderToStaticMarkup

Question

1 answers

solution1 0 2016-10-06 23:25:45

solution1
0 2016-10-06 23:25:45