[REACT JS]Why do I keep getting "ERROR in [eslint] ERROR in [eslint] Parsing error: Unexpected token" for using var,=>?

Ayush Raj 0
Viewed 47
  1. I'm getting this error around both the "var" definition inside the event listener. Vs code suggests to add { and , again and again but nothing gets fixed.
  2. Also Vs code suggests me to use '{'>'}' instead of =>

React code->

   import React from 'react';

   class Event extends React.Component{
       render(){
           return(
               <div>

           <div class=" ">
           <svg>
            <g>
            < path d=/>
            </g>
            ...
           </svg>
           </div>
    <script>
    ...                                                  
    </script>
        </div>
    );
    }
    }
    export default Event;

following is the script-> 

    let path = document.querySelector ('path')
    

    let pathLength = path.getTotalLength()
    

    path.style.strokeDasharray = pathLength + ' ' + pathlength;

    path.style.strokeDashoffset = pathLength;

    //I get error for "=>" in the following
    

    window.addEventListener('scroll',() => {
        
        //I get errors for both of these vars

        var scrollPercentage =(document.documentElement.scrollTop+document.body.scrollTop)/(document.documentElement.scrollHeight-document.documentElement.clientHeight)


        var drawLength = pathLength*scrollPercentage

        path.style.strokeDashoffset = pathLength-drawLength
        })
                                                      
    </script>

Following is the app.js->

    import Event from './pages/events';
    import './App.css';

    function App() {
      return (
      <>
      <Event/>
      </>

      );
      }

      export default App;
svg eslint reactjs javascript
1 Answers

You are putting colons after the var and that is not valid javascript syntax. It should be:

 <script>


 let path = document.querySelector ('path')


 let pathLength = path.getTotalLength()


 path.style.strokeDasharray = pathLength + ' ' + pathlength;

 path.style.strokeDashoffset = pathLength;

 //I get error for "=>" in the following


 window.addEventListener('scroll',() => {

     //I get errors for both of these vars

     var scrollPercentage =(document.documentElement.scrollTop+document.body.scrollTop)/(document.documentElement.scrollHeight-document.documentElement.clientHeight)


     var drawLength = pathLength*scrollPercentage

     path.style.strokeDashoffset = pathLength-drawLength
     })

 </script>

Edit after you edited your question with react code:

Your react code is a bit of a mess. You shouldn't put script tags in the rendered function in react. You are already using javascript with react so there is no reason whatsoever to put a script tag in your render function. Also instead of using class to specify a div's class in react you use className instead. So <div class=" "> should be <div className=" ">. I would really suggest you go though the main concepts of react starting here https://reactjs.org/docs/hello-world.html and going through all of 1 - 12. You access dom nodes in react with refs and you would use lifecycles to add and remove event listeners. But anyway here is somewhat how a correct react component should look:

class Event extends React.Component{
  constructor(props) {
    super(props)

    // This is the correct way to access dom nodes in react
    this.pathRef = React.createRef()
  }

  handlePathScroll = () => {
    var path = this.pathRef.current
    var pathLength = path.getTotalLength()

    var scrollPercentage =(document.documentElement.scrollTop+document.body.scrollTop)/(document.documentElement.scrollHeight-document.documentElement.clientHeight)
    var drawLength = pathLength * scrollPercentage
    path.style.strokeDashoffset = pathLength - drawLength
  }

  componentDidMount() {
    // if you need to set the initial stroke dash array and dash offset otherwise you can emit this
    var path = this.pathRef.current
    var pathLength = path.getTotalLength()
    path.style.strokeDasharray = pathLength + ' ' + pathLength;
    path.style.strokeDashoffset = pathLength;

    // Add the scroll Event listeners when the component mounts
    window.addEventListener('scroll', this.handlePathScroll)
  }

  componentWillUnmount() {
    // Cleanup and  remove the scroll event listeners when the component unmounts
    window.removeEventListener('scroll', this.handlePathScroll)
  }

  render(){
    return (
      <div>
        <svg>
          <g>
            <path ref={this.pathRef}  />
          </g>
        </svg>
      </div>
    )
  }
}

Even with this most people are moving away from class based components in favor of function based components but this should give you an idea of what it should look like. Here is some documentation on how to access dom nodes in react https://reactjs.org/docs/refs-and-the-dom.html. And here is some documentation on react's lifecycles https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class.

EndlessCodebase0
Related