Allowing a render function to return JSX and console.error a message.

[justin808]

to return JSX and detcting that

If you were a user of React on Rails, would you mind the small required changes to ensure correct functionality? In other words, we will always call React.createElement in the library, rather than just taking JSX from some function that took props and was invoked by React on Rails.

See the discussion here:
#1198 (comment)

---

This change is 

[justin808]

Basically, this skips the maybe essential call of React.createElement(component, props).

This 100% breaks if hooks are used.

Should we just error out and force the change to wrap the result JSX in a function with zero params?

or should we make the upgrade easier for 99% of the cases that did not use Hooks.

[justin808]

If you take 2, correct is to use a React Function Component:

import React from 'react';
import AppComponent from './AppComponent';
const AppComponentWithRailsContext = (props, railsContext) => (
  // It's better to create a React Function Component so you can
  // use the React Hooks API in this React Function Component
  () => <AppComponent {...{...props, railsContext}}/>
)
export default AppComponentWithRailsContext

Currently, this works, to just return a React Element (JSX)

import React from 'react';
import AppComponent from './AppComponent';
const AppComponentWithRailsContext = (props, railsContext) => (
  <AppComponent {...{...props, railsContext}}/>
)
export default AppComponentWithRailsContext

I propose that I'll allow the second case for v12, but print a warning console message indicating that the JSX should get wrapped in a function to make the return value a React Function Component.