1

I'm trying to render a button in React using perfectly valid JSX (at least, as far as I can tell after looking at it for 20 minutes). But for some reason I keep getting the syntax error:

Unexpected token '<' on line 18

This comes as a surprise to me considering when I load the script I'm both using the text/babel type attribute, and the babel script is loaded in the <head> while this one is loaded in the DOM.

Here's what my HTML looks like:

<head>
    <!-- react, react-dom, axios etc. go here !-->
    <script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <!-- notice that i'm using babel !-->
    <script type="text/babel" src="cdn/static/scripts/module/user.js">
</body>

And here is my JavaScript:

class User extends Component{
    constructor(props){
        super();
        this.user = props.user;
        this.state = {
            modalOpen: false
        };
    }

    Button = () => {
        let user = this.user;
        //     vvvv this is what the error points to
        return <button className={(user.loggedIn ? "user" : "sign-in")}>{(user.loggedIn ? user.public.display : "Sign In")}</button>;            
    }

    render(){
        return (
            <div className="button">
                <this.Button />
            </div>
        );
    }
}

ReactDOM.render(<User user={window.User} />, document.getElementById("content"));

What is even stranger is that it will actually render the button, but because there is an error, it will also cause the rest of my JavaScript to break.

I've never come across this problem before so all help is appreciated, cheers.

GROVER.
  • 4,071
  • 2
  • 19
  • 66
  • 1
    Button is a function not a component, try `{this.button()}` instead of `` to execute the function. – Reyno Jul 13 '20 at 09:10
  • @theblackgigant `` is an anonymous functional component and is rendered normal in all my other scripts. Should also add that changing it doesn't remove my error. :-( – GROVER. Jul 13 '20 at 09:11
  • try repeat simple example https://stackoverflow.com/questions/53972473/how-to-perform-import-export-in-client-side-react-jsx-using-babel-standalone/53975781 – Vadim Hulevich Jul 13 '20 at 09:15
  • 1
    Don't do `this.Button()` as suggested, you must use `createElement` in order to register it to React tree. – Dennis Vash Jul 13 '20 at 09:16

1 Answers1

0

You don't have React scripts attached see how to create React app.

Because JSX is syntatic sugar for React.createElement, and custom components must be Uppercased, you should render Button like so:

class User extends Component{
    constructor(props){
        super();
        this.user = props.user;
        this.state = { modalOpen: false };
    }

    Button = () => {
        let user = this.user;
        return (
            <button className={user.loggedIn ? "user" : "sign-in"}>
                {user.loggedIn ? user.public.display : "Sign In"}
            </button>
        );
    }

    render(){
        const Button = this.Button;
        return (
            <div className="button">
                <Button />
            </div>
        );
    }
}

Or invoke React.createElement directcly:

<div className="button">
 {React.createElement(this.Button, null)}
</div>

See JSX in Depth.

Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
  • Didn't do anything, unfortunately. – GROVER. Jul 13 '20 at 09:26
  • Again like I mentioned in your previous questions, do you have a reproducible example in a sandbox? [codesandbox](https://codesandbox.io/s/vanilla-react-template-irhcq), what does it mean "Didn't do anything", same error (not likely)? Nothing appears on the screen? [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) – Dennis Vash Jul 13 '20 at 09:29
  • Didn't do anything, generally, means nothing has changed. So yes, I still get the same error. – GROVER. Jul 13 '20 at 09:30
  • I think you don't have babel's JSX installed. https://reactjs.org/docs/cdn-links.html, https://reactjs.org/docs/create-a-new-react-app.html#creating-a-toolchain-from-scratch – Dennis Vash Jul 13 '20 at 09:31