CODEWITHSUNDEEP
javascriptreactjsdebuggingecmascript-6jsx
user3657227
user3657227

Reputation: 67

console error for react example webpage - a stateful component

The code snippet is found on the react webpage

Scrolling down to A Stateful Component

Copy+Pasted into my codepen, this console error comes up

Uncaught SyntaxError: Unexpected token <

Here is the codepen link

Also here is the code itself:

class Timer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {secondsElapsed: 0};
    }

    tick() {
        this.setState((prevState) => ({
          secondsElapsed: prevState.secondsElapsed + 1
        }));
    }

    componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    } 

    render() {
        return (
          <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
        );
    }

}
ReactDOM.render(<Timer />, mountNode);

Upvotes: 0

Views: 51

Answers (1)

Dev
Dev

Reputation: 3932

Add Babel as preprocessor, add node in HTML where you wish to mount the component.

<div id="mountNode"/>

Updated Link : https://codepen.io/DP888/pen/Gvdwzg?editors=1010

As the JSX syntax and ES6, are not supported in all the browsers.Hence, if we are using them in the React code, we need to use a tool which translates them to the format that has been supported by the browsers. It’s where babel comes into the picture.

Upvotes: 2

Related Questions