ReactJS ComponentDidMount is not working

ReactJS ComponentDidMount is not working
0

#1

I have got problem with my react component which renders form. Basically, when I enter countdown page, the form just doesn’t work (by that I mean it doesnt act at all, I write for example 123 which is 2 min and 3 seconds and nothing happens, just nothing). But, for example, if I go on to main page and back to countdown page, it works. I have noticed that when entering this page the first time, componentWillMount works, but componentDidMount doesn’t (it won’t console.log the message). Link to heroku: http://fathomless-lowlands-79063.herokuapp.com/?#/countdown?_k=mj1on6
Link to github: https://github.com/bartoszbinda/timer-react

//CountdownForm.jsx
    var React = require('react');
    var CountdownForm = React.createClass({
      onSubmit: function (e) {
        e.preventDefault();
        var strSeconds = this.refs.seconds.value;
        if (strSeconds.match(/^[0-9]*$/)){
          this.refs.seconds.value = '';
          this.props.onSetCountdown(parseInt(strSeconds, 10));
        }

      },
      render: function () {
        return(
          <div>
          <form ref="form" onSubmit={this.onSubmit} className="countdown-form">
            <input type="text" placeholder="Enter time in seconds" ref="seconds" />
            <button className="button expanded">Start
            </button>
          </form>
        </div>
       );
       }
      });
      module.exports = CountdownForm;


//Countdown.jsx


    var React = require('react');
    var Clock = require('Clock');
    var CountdownForm = require('CountdownForm');
    var Controls = require('Controls');

    var Countdown = React.createClass({
      getInitialState: function () {
        return {
          count: 0,
          countdownStatus: 'stopped'
         };
      },
      componentDidUpdate: function (prevProps, prevState) {
        if (this.state.countdownStatus !== prevState.countdownStatus)
        {
          switch (this.state.countdownStatus){
              case 'started':
                this.startTimer();
                break;
                case 'stopped':
                  this.setState({count: 0})
                case 'paused':
                  clearInterval(this.timer)
                  this.timer = undefined;
                break;
          }
        }
      },
      componentDidMount: function() {
        console.log("componentDidMount");
      },
      componentWillMount: function () {
        console.log("componentWillMount");
      },
      componentWillUnmount: function () {
        console.log('componentDidUnmount');
      },
      startTimer: function () {
          this.timer = setInterval(() => {
            var newCount = this.state.count - 1;
            this.setState({
              count: newCount >= 0 ? newCount : 0
            });
          }, 1000);
      },
      handleSetCountdown: function (seconds){
        this.setState({
          count: seconds,
          countdownStatus: 'started'
        });
      },
      handleStatusChange: function (newStatus) {
        this.setState({
          countdownStatus: newStatus
        });
      },
      render: function () {
        var {count, countdownStatus} = this.state;
        var renderControlArea = () => {
          if (countdownStatus !== 'stopped') {
          return <Controls countdownStatus={countdownStatus} onStatusChange={this.handleStatusChange} />
          } else {
            return <CountdownForm onSetCountdown={this.handleSetCountdown} />
          }

        };
        return(
        <div>
          <Clock totalSeconds={count} />
          {renderControlArea()}
        </div>
      );
    }
    });
    module.exports = Countdown;

#2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.


#3

I have solved the problem. Main issue was error: “Uncaught Error: Stateless function components cannot have refs. at invariant” . The problem was with stateless components, so that’s why I instead of using arrow functions in Main.jsx and Nav.jsx, I used the React.createClass({}).