How to create window event listener in react component?

Question

I have a simple react component for my app, I would like to add resize function using window add event listener

Here is my solution

import React, { Component } from 'react';

class thankyoupayment extends Component {

    const resizeWindow = () =>{
        console.log('Resize me');
    }

    componentDidMount() {
        window.addEventListener('resize', this.resizeWindow);
     }

    render() {
        return (
            <VideoContainer>
                    <video></video>
            </VideoContainer>
        );
    }
}

const VideoContainer =styled.div`
        display: flex;
        justify-content: center;
`

Unfortunately when I run I am gettin the following error

Unexpected token (8:10)

What do I need to change to solve the problem? React Newbie as hell

kind user · Accepted Answer · 2019-12-11 12:45:32Z

1

First of all, the Class name should be capitalized:

class Thankyoupayment extends Component {

Secondly, you can't use const as a Class method:

resizeWindow = () => {

answered Dec 11, 2019 at 12:45

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

The Dead Man Over a year ago

now I am getting the following error

react\resources\js\pages\Thankyou\thankyoupayment.js: Support for the experimental syntax 'classProperties' isn't currently enabled (8:17):

what do I needs to change?

kind user Over a year ago

@user9964622 Oh, seems like you don't have babel that will compile yet experimental class fields. Try to add babel or a specified babel extension. You can also change that arrow function into a es5 function (handleResize() { ... }) but then you will probably have to bind it inside constructor.

The Dead Man Over a year ago

now no errors but when I try to resize the window there is no console.log('resize me');

kind user Over a year ago

@user9964622 Just bind it inside constructor constructor(props){ super(props); this.handleResize = this.handleResize.bind(this); }

Collectives™ on Stack Overflow

How to create window event listener in react component?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related