CODEWITHSUNDEEP
reactjsgsap
askemeline
askemeline

Reputation: 367

Cannot read property '' of undefined with addEventListener, gsap and react

I got a problem I try to have an animation with my cursor with gsap and react but I got an error "TypeError: Cannot read property 'page' of undefined"

If someone can help me It's would be nice. Thanks

class App extends React.Component {
  constructor(props) {
    super(props);
    this.page = React.createRef();
    this.cursor = React.createRef();
  }
  render() {
    return (
      <div className="App" ref={this.page} >
        <div>hey</div>
        <div className="cursor" ref={this.cursor}></div>
      </div>
    );
  }
}
const enterMouse = () => {
//some code
};

const moveMousePos = (e) => {
//some code
};

this.page.addEventListener('mouseenter', enterMouse);
this.page.addEventListener('mousemove', moveMousePos);

export default App;

Upvotes: 0

Views: 202

Answers (1)

Daniel Duong
Daniel Duong

Reputation: 1104

Your functions enterMouse moveMousePos are not properly scoped. Right now they are outside your component block. You need to move those inside your component.

Upvotes: 1

Related Questions