Lonnie McGill Lonnie McGill - 1 year ago 76
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';


export default class AboutHeader extends React.Component {

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

componentDidMount() {

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

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


Answer Source

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