AboutHeader.jsx:21 Uncaught TypeError: this.setState is not a function

1
votes

I am trying to do a state change that will change the className after setTimeout, however, I keep getting a "AboutHeader.jsx:21 Uncaught TypeError: this.setState is not a function" I've tried binding (this) but it still won't work. import React from 'react';

require('../../stylesheets/component/AboutHeader.scss');

export default class AboutHeader extends React.Component {

constructor() {
    super()
this.timeDelay = this.timeDelay.bind(this);
    this.state = {
        class: "about-header-wrapper-hidden"
    }
}

componentDidMount() {
console.log("mounted");
    this.timeDelay();
}

timeDelay() { setTimeout(function updateState(){this.setState({class: "about-header-wrapper"})}, 1000); console.log("timeDelay worked"); }

render() {
    return (
        <section className={this.state.class}></section>
    )
}

}

1
reactjs

1 Answers

1
votes

You have to .bind(this) on the setTimout(). Here's your code in JSBin with binding this. If you remove it, it throws the error.

setTimeout(function updateState() {
  this.setState({ class: "about-header-wrapper" })
}.bind(this), 1000);