# ReactJS ComponentDidMount is not working

**URL:** <https://forum.freecodecamp.org/t/reactjs-componentdidmount-is-not-working/75389>\
**Category:** General\
**Created:** [January 11, 2017, 12:06pm UTC](https://forum.freecodecamp.org/t/reactjs-componentdidmount-is-not-working/75389 "2017-01-11T12:06:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bartoszbinda](https://avatars.discourse-cdn.com/v4/letter/b/bc79bd/32.png) [@bartoszbinda](https://forum.freecodecamp.org/u/bartoszbinda)\
**Post date:** [January 11, 2017, 12:06pm UTC](https://forum.freecodecamp.org/t/reactjs-componentdidmount-is-not-working/75389/1 "2017-01-11T12:06:09Z")

</div>

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](http://fathomless-lowlands-79063.herokuapp.com/?#/countdown?_k=mj1on6)  
Link to github: [https://github.com/bartoszbinda/timer-react](https://github.com/bartoszbinda/timer-react)

```auto
//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;

```

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [January 11, 2017, 2:06pm UTC](https://forum.freecodecamp.org/t/reactjs-componentdidmount-is-not-working/75389/2 "2017-01-11T14:06:40Z")

</div>

I cleaned up your code.  
You need to use triple backticks to post code to the forum.  
See [this post for details](http://forum.freecodecamp.com/t/forum-code-formatting/25574).

---

<div class="post-metadata">

**Author:** ![bartoszbinda](https://avatars.discourse-cdn.com/v4/letter/b/bc79bd/32.png) [@bartoszbinda](https://forum.freecodecamp.org/u/bartoszbinda)\
**Post date:** [January 14, 2017, 9:33pm UTC](https://forum.freecodecamp.org/t/reactjs-componentdidmount-is-not-working/75389/3 "2017-01-14T21:33:36Z")

</div>

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({}).

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 11:33am UTC](https://forum.freecodecamp.org/t/reactjs-componentdidmount-is-not-working/75389/4 "2021-01-16T11:33:28Z")

</div>