wrong compile result in jsx

source

const Ob = (props) => {

  return <div>{props.r()}</div>
}

const App = () => {
  return <h2>
    hello
    <Ob r={() => {
      return <h1>zzzz</h1>
    }}/>
  </h2>
}

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

output:

"use strict";
const Ob = (props) => {

  return React.createElement("div", null, props.r())
}

const App = () => {
  return React.createElement("h2", null, "hello\r\n    ", 
            React.createElement(Ob, {r: true},    // =================> why ?
                React.createElement("h1", null, "zzzz")))
}

ReactDOM.render(
  React.createElement(App, null),
  document.getElementById('root')
);

[ilovedesert001]

Thanks @ilovedesert001 for finding this and providing a good compact example.

I can confirm that this syntax is not yet handled so you can consider it a bug. I will do more testing to see if I can get a fix in (hopefully this week).

In the meantime, for reference moving the inline function outside of the Component will allow the code to compile.

const Ob = (props) => {
    return <div>{props.r()}</div>
}

function r() {
    return <h1>zzzz</h1>
}

const App = () => {
    return <h2>
        hello
        <Ob r={r}/>
    </h2>
}

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

Thanks for reply .

I think this project has huge potential. Especially when using in small/demo projects. i used htm.js before , Hope this is getting better and better

Thank you for implementing this library .

[ConradSollitt]

Thanks and thanks for your help testing!

I just published a new release 5.10.3 that includes this fix. I gave you credit in the CHANGELOG.md file for finding and helping with this issue.