Mayday Mayday - 2 months ago 6
React JSX Question

React strange internal issue depending on variable name

I am having troubles with react depending on the name I give to a variable.

I am using eval sourcemap to see the generated code, and there is something I am not able to understand

I have 2 files. In one of them I export a HOC, and I import it in the other file.

In the same file where I export that HOC, I try to use it. This is the file where I have problems:


File A: (DmDefEntity is my HOC)


class DmClass extends Component {
...
...
methodA() {
...
return <_internalDmClass def={entry.def} lbls={this.props.lbls[key]} path={key} name={key} />;
}

render() {
...
}
}

const _internalDmClass = DmDefEntity(DmClass);
export default _internalDmClass;


The important lines transpiled show:


Transpile with underscore in variable


...
...
return _react3.default.createElement(_internalDmClass, { def: entry.def, lbls: this.props.lbls[key], path: key, name: key });
...
...

var _internalDmClass = (0, _DmDefEntity2.default)(DmClass);
exports.default = _internalDmClass;


Everything looks good here, and it actually works perfectly.

However

If i rename this variable into "internalDmClass" (with no underscore). My transpiled File becomes:


Transpile with no underscore in variable


...
...
return _react3.default.createElement('internalDmClass', { def: entry.def, lbls: this.props.lbls[key], path: key, name: key });
...
...

var internalDmClass = (0, _DmDefEntity2.default)(DmClass);
exports.default = internalDmClass;


So as you can see, depending on that underscore, it calls to createElement with a String, or the real HOC class, with its defaul property, etc.

The effect of this in execution time is the following error:


Warning: Unknown props
def
,
lbls
,
path
on tag. Remove these props from the element. For details, see https://facebook.github.io/react/warnings/unknown-prop.html

Answer

In React, any component that starts with a lower case letter will be interpreted as an HTML element. To fix this, rename it to InternalDmClass.

All lower case JSX tags will now be treated as HTML/SVG elements. They will no longer be treated as custom components in scope.

Source