I'm new to React.js. I'm trying to get the left nav to stick on scroll. For some reason the code below is causing the following error when I scroll:

Uncaught TypeError: this.setState is not a function

Any help would be great! thanks

class Sticky extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      scrollingLock: false
    };
}

ponentDidMount(){
    window.addEventListener('scroll', this.handleScroll);
}

ponentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

handleScroll() {

  if (window.scrollY > 100) {
    console.log("should lock");
    this.setState({
      scrollingLock: true
    });
  } else if (window.scrollY < 100) {
    console.log("not locked" );
    this.setState({
      scrollingLock: false
    });
  }

}

render() {

    return (
            <div style={{ width: "100%", position: this.state.scrollingLock ? "fixed" : "relative"}}>
                    {this.props.children}
            </div>
          )
            }
   }

export default Sticky;

I'm new to React.js. I'm trying to get the left nav to stick on scroll. For some reason the code below is causing the following error when I scroll:

Uncaught TypeError: this.setState is not a function

Any help would be great! thanks

class Sticky extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      scrollingLock: false
    };
}

ponentDidMount(){
    window.addEventListener('scroll', this.handleScroll);
}

ponentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

handleScroll() {

  if (window.scrollY > 100) {
    console.log("should lock");
    this.setState({
      scrollingLock: true
    });
  } else if (window.scrollY < 100) {
    console.log("not locked" );
    this.setState({
      scrollingLock: false
    });
  }

}

render() {

    return (
            <div style={{ width: "100%", position: this.state.scrollingLock ? "fixed" : "relative"}}>
                    {this.props.children}
            </div>
          )
            }
   }

export default Sticky;

• javascript
• reactjs

• Have you tried to bind handleScroll method? – The Reason Commented Nov 5, 2015 at 21:25

3 Answers 3

This code should work for you.

class Sticky extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      scrollingLock: false
    };
    // example how to bind object in React ES6
    this.handleScroll = this.handleScroll.bind(this)
}

ponentDidMount(){
    window.addEventListener('scroll', this.handleScroll);
}

ponentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

handleScroll() {

  if (window.scrollY > 100) {
    console.log("should lock");
    this.setState({
      scrollingLock: true
    });
  } else if (window.scrollY < 100) {
    console.log("not locked" );
    this.setState({
      scrollingLock: false
    });
  }

}

render() {

    return (
            <div style={{ width: "100%", position: this.state.scrollingLock ? "fixed" : "relative"}}>
                    {this.props.children}
            </div>
          )
            }
   }

 React.render(<Sticky/> , document.body)

Also here is a good article around binding in ES6 React Code.

I hope it will help you.

Thanks

You should put the method and the instance into one function using Function.prototype.bind(). I remend you to save bound function as a property like this:

class Sticky extends React.Component {
  constructor(props) {
    ...
    this._handleScroll = this.handleScroll.bind(this);
  }

  ponentDidMount(){
    window.addEventListener('scroll', this._handleScroll);
  }

  ponentWillUnmount() {
    window.removeEventListener('scroll', this._handleScroll);
  }
  ..
}

React ponent doesn't auto bind with ES6 class. So you manually bind the instance and its methods.

I had a similar issue, I used react-sticky which you can find here. It's very simple to install, and if you want to see some live code for reference, you can see that here. Of course that's adding another dependency, but it also took me 10 minutes to get it running. Good luck!