React error (unexpected token '<')

JavaScript
1

I’m trying to improve my react skills, so i created this GIF meme component and it runs ok on the FCC platform but when i try to run it on codepen or repl it throws the syntax error unexpected token ‘<’, any help?

(my GIF variable doesn’t have a “>” tag only here (the forum here treats it as an actual image)

var GIF = <img src="https://i.makeagif.com/media/5-21-2019/ZftErB.gif" /

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      gifs: [],
      counter: 0
    }

    this.button_click = this.button_click.bind(this);
    this.button_reset = this.button_reset.bind(this)
  }
  button_click() {
    if (this.state.counter <= 25) {
      this.setState(state => ({
        gifs : state.gifs.concat(GIF),
        counter: state.counter+1
      }));
     }
    else window.alert("reached maximum clicks")
  }

  button_reset() {
    this.setState({
      gifs: [],
      counter: 0
    })
  }
  render() {
    return (<div> <button onClick={this.button_click}>
Click To Add GIF</button> 
<button onClick={this.button_reset}>Click To Reset</button> 
    {this.state.gifs}
    </div>)
  }
}

ReactDOM.render(<MyComponent />, document)
2

Hello there,

Would you mind sharing the link to your CodePen/Repl?

Taking a guess, I would say it is because you have not correctly imported the React/ReactDOM scripts into the project.

3

Hi, @harel_ avv!!!
Didn’t you forget the closing tag of <img>?
I can’t see closing tag of <img>.
How about use this?

var GIF = <img src="https://i.makeagif.com/media/5-21-2019/ZftErB.gif" />

best wishes!

4

I’ve imported everything that has ‘React’ in its name, i’ve also included script tags that import React
https://codepen.io/harel_avv/pen/eYdzOdV

5

so that was in purpose;
also

wouldn’t run on FCC with a syntax error
also

it’s an opening tag, not a closing one, and i forgot to mention the error was pointing at the div i was returning

6

We cannot really help, with the little information you have given.

7

This looks very weird:

ReactDOM.render(<MyComponent />, document)

The second parameter should be a node in the DOM, not the whole document. My wild guess is that the “unexpected token ‘<’” is the opening tag of the <!DOCTYPE> declaration.