G
G
Grigory Dikiy2016-08-08 22:31:00
JavaScript
Grigory Dikiy, 2016-08-08 22:31:00

React ES6 state?

Good day. Not so long ago I got acquainted with React and used ES5 notation, but I decided to switch to ES6 and I get an error: Uncaught TypeError: Cannot read property 'timeout' of undefined , although there is a variable in the constructor:

import React from 'react';

class PomidoroTimer extends React.Component {
  constructor(props) {
     super(props);
     this.intervals = [];
     this.state = {
         timeout: 25 * 60
     };
  }

  componentWillMount() {
    this.setInterval(this.decrimentTimer, 1000);
  }

  setInterval() {
    this.intervals.push(setInterval.apply(null, arguments));
  }

  decrimentTimer() {
    this.setState({timeout: this.state.timeout - 1});
  }

  componentWillUnmount() {
    this.intervals.map(clearInterval);
  }

  updateTimeout(timeout) {
    this.setState({ timeout: timeout });
  }

  render() {
    return (
      <div className="timer">
        <div className="timer-block">
          <div className="timer__digit-block">
            <div className="digits">58</div>
            <div className="timer__digit-block-text">Минут</div>
          </div>
          <div className="timer__separator"></div>
          <div className="timer__digit-block">
            <div className="digits">44</div>
            <div className="timer__digit-block-text">Секунд</div>
          </div>
        </div>
      </div>
    );
  }
}

export default PomidoroTimer;

Answer the question

In order to leave comments, you need to log in

2 answer(s)
G
Grigory Dikiy, 2016-08-08
@frilix

Everything was solved through bind:

constructor(props) {
     super(props);
     this.intervals = [];
     this.state = {
         timeout: 25 * 60
     };

     // Bind Methids
     this.decrimentTimer = this.decrimentTimer.bind(this);
  }

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question