title: Uncaught SyntaxError: Unexpected token '<' react gatsby webapp
body: <p>**</p>
  <blockquote>
  <p>React Gatsby web app: Uncaught SyntaxError: Unexpected token '&lt;'</p>
  </blockquote>
  <p>**</p>
  <p>I am getting this error while running the app. This page is having a button event handler. look at this code given below.</p>
  <p>Coursecart.js page.</p>
  <pre><code>import React, { Component } from &quot;react&quot;
  import Heading from &quot;../Reuseable/Heading&quot;
  import Img from &quot;gatsby-image&quot;
  
  const getCategory = items =&gt; {
    let holditems = items.map(items =&gt; {
      return items.node.category
    })
    let holdCategories = new Set(holditems)
    let categories = Array.from(holdCategories)
    categories = [&quot;all&quot;, ...categories]
    return categories
  }
  
  export default class Coursecart extends Component {
    constructor(props) {
      super(props)
      this.state = {
        courses: props.courses.edges,
        mycourses: props.courses.edges,
        mycategories: getCategory(props.courses.edges),
      }
    }
  
    cateClicked = category =&gt; {
      let keepItsafe = [...this.state.courses]
      if (category === &quot;all&quot;) {
        this.setState(() =&gt; {
          return { mycourses: keepItsafe }
        })
      } else {
        let holdMe = keepItsafe.filter(node =&gt; {
          return node.category === category
        })
        this.setState(() =&gt; {
          return { mycourses: holdMe }
        })
      }
    }
  
    render() {
      return (
        &lt;section className=&quot;py-5&quot;&gt;
          &lt;div className=&quot;container&quot;&gt;
            &lt;Heading title=&quot;Courses&quot; /&gt;
            &lt;div className=&quot;row my-3&quot;&gt;
              &lt;div className=&quot;col-10 mx-auto text-center&quot;&gt;
                {this.state.mycategories.map((category, index) =&gt; {
                  return (
                    &lt;button
                      type=&quot;button&quot;
                      className=&quot;btn btn-info m-3 px-3&quot;
                      key={index}
                      onClick={() =&gt; {
                        this.cateClicked(category)
                      }}
                    &gt;
                      {category}
                    &lt;/button&gt;
                  )
                })}
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;row&quot;&gt;
              {this.state.mycourses.map(({ node }) =&gt; {
                return (
                  &lt;div
                    key={node.id}
                    className=&quot;col-11 col-md-6 d-flex my-3 mx-auto&quot;
                  &gt;
                    &lt;Img fixed={node.image.fixed} /&gt;
                    &lt;div className=&quot;flex-grow-1 px-3&quot;&gt;
                      &lt;div className=&quot;d-flex&quot;&gt;
                        &lt;h6 className=&quot;mb-0&quot;&gt;{node.title}&lt;/h6&gt;
                        &lt;h6 className=&quot;mb-0 text-success ml-3&quot;&gt;$ {node.price}&lt;/h6&gt;
                      &lt;/div&gt;
                      &lt;p className=&quot;text-muted&quot;&gt;
                        &lt;small&gt;{node.description.description}&lt;/small&gt;
                      &lt;/p&gt;
                      &lt;button
                        className=&quot;btn btn-warning snipcart-add-item&quot;
                        data-item-id={node.id}
                        data-item-name={node.title}
                        data-item-price={node.price}
                        data-item-url=&quot;https://https://rgecom.netlify.app/&quot;
                        data-item-image={node.image.fixed.src}
                      &gt;
                        Join Now
                      &lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                )
              })}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      )
    }
  }
  </code></pre>