title: Endless wave animation with paper.js and reactJS. TypeError: Cannot read property 'point' of undefined
body: <p>I'm trying to create an endlessly waving line (animation) the same way it's done here <a href="http://paperjs.org/tutorials/animation/creating-animations/" rel="nofollow noreferrer">http://paperjs.org/tutorials/animation/creating-animations/</a></p>
  <p>with paper.js &amp; React JS.</p>
  <p>But I get the error</p>
  <blockquote>
  <p>&quot;TypeError: Cannot read property 'point' of undefined.&quot;</p>
  </blockquote>
  <p>whenever I try to loop over the segments inside the path.</p>
  <p>Funny thing is, that, If I don't loop, I don't get this error with 'point' property and everything works perfectly fine (I see the animation).</p>
  <pre><code>    import React from 'react';
      import './Canvas.css';
      import Paper, { Path, Point, onFrame } from &quot;paper&quot;;
      
      
      const Wdivider = Math.round(window.innerWidth / 6);
      const linesNumber = Math.round(window.innerHeight / 10);
      const points = [[0, 0], [Wdivider, 25], [2*Wdivider, 0], [3*Wdivider, 25], [4*Wdivider, 0], [5*Wdivider, 25],[window.innerWidth, 0]];
      
      
      var topLeft = [0, window.innerHeight/2];
      var bottomRight = [window.innerWidth, window.innerHeight/2];
      
      
      let myPath;
      let copy;
      
      class Canvas extends React.Component{
      
      
          componentDidMount() {
              this.createLines();
              Paper.view.onFrame = event =&gt; {
                    this.onFrameAnim(event, myPath);
              };
          }
      
          createLines(){
              var myCanvas = document.getElementById(&quot;myCanvas&quot;);
              Paper.setup(myCanvas);
      
                  myPath = new Path({segments: points});
      
                  myPath.smooth();
      
      
              }
      
              //Animation
      
              onFrameAnim(event, path) {
      
                  
                  for (let i=0; i &lt; myPath.length; i++ ) {
                      if (myPath.segments[i].point.y &gt;= 0) {
                          myPath.segments[i].point.y -= 50;
                      }
                      
                      else {
                          myPath.segments[i].point.y += 50;
                      }
                  }
              
              }
      
      
          
          render(){
              return (
                  &lt;canvas id=&quot;myCanvas&quot; resize=&quot;true&quot; /&gt; 
              );
          }
      }
      
      export default Canvas;
  </code></pre>