bier hier bier hier - 1 month ago 13
React JSX Question

How to solve the unexpected token error in my jsx?

I am using reactjs and this is part of my componentcode:

myType() {
return myComponent;
}
render() {
return (
<div className="row">
{
let thisType = this.myType;
return (<thisType />)
}
</div>
);
}


When I run my code I get this error:

BabelLoaderError: SyntaxError: ../.../myComponent.js: Unexpected token (47:19


This is pointing to the let statement?

Answer

You should get the name of the component outside of JSX and put it in a variable with the first letter capitalised (that's how JSX determines whether it's a custom component):

myType() {
    return myComponent;
}

render() {
    let ThisType = this.myType();

    return (
        <div className="row">
            <ThisType />
        </div>
    );
}