Lonnie McGill Lonnie McGill - 1 month ago 13
React JSX Question

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

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>
)
}


}

Answer

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);