Top level element should be a tag or function which returns a tag

[inspiraller]

Hi
I have installed this plugin but having problems.

$ npm install jsx-to-html

myreactfile.jsx

import React, { Component } from 'react';
import { render } from 'jsx-to-html';

class App extends Component {
	getComp(){
	  	var content = render(<div className="hello">hello</div>);
		console.log('content = ', content);
		return ('<div>hello</div>');
	}
	render() {
    	return (
    		<div className="all">
			{this.getComp()}
		</div>
		)
	}
}

ReactDOM.render(
	<App/>,
	document.getElementById('app')
);

I am getting error:
Uncaught Error: Top level element should be a tag or function which returns a tag

I have tried adding the plugin via .babelrc but that gives me an error too so I'm not entirely sure the plugin has loaded:

.babelrc

{
  "presets" : ["es2015", "react"],
	"plugins": [
 		["jsx-to-html/babel-plugin",
 		{ 
 			"blacklist": ["react"]
 		}]
	]
}

[NekR]

@inspiraller This plugin was written for Babel 5 and wasn't really intended to be used with React. Why do you even use it?

[inspiraller]

Jsx is react isn't it? In anycase i want to render my jsx components into a html string so i can escape the tags to becomr pre/code examples before rendering thrm into a documentation page.

The only way i can think to do that currently is render them first into a fragment, then read the innerhtml to escape the tags before rendering it again. I don't like that method because its not as performant.

[SleeplessByte]

No need for babel or anything else:

import { render } from 'react-dom'

function getReactNodeHtml(node) {
  const detached = document.createElement('div')
  ReactDom.render(node, detached)
  return detached.innerHtml
}

Then use:

const html = getReactNodeHtml((<div className="hello">hello</div>))
console.log(html)

//<div data-reactroot="" class="hello">hello</div>

You probably want to get rid of the data-reactroot attribute:

import { render } from 'react-dom'
const REACT_ROOT_PATTERN = new RegExp(/data-reactroot(?:="")?\s?/)

function getReactNodeHtml(node) {
  const detached = document.createElement('div')
  render(node, detached)
  return detached.innerHtml.replace(REACT_ROOT_PATTERN, '')
}

// <div class="hello">hello</div>

Here is the Typescript without TSX/JSX equivalent

import { render } from 'react-dom'
const REACT_ROOT_PATTERN = new RegExp(/data-reactroot(?:="")?\s?/)

function getReactNodeHtml(node: JSX.Element) {
  const detached = document.createElement('div')
  render(node, detached)
  return detached.innerHTML.replace(REACT_ROOT_PATTERN, '')
}

const html = getReactNodeHtml(createElement('div', { className: 'hello' }, 'hello'))
console.log(html)

// <div class="hello">hello</div>

[inspiraller]

Thanks. Yes, that is what I am already doing, but as I said I would rather not have to render it first to improve performance. Regards. Thanks for the code example.