Calling function at set intervals in React presentational component

Question

I'm trying to implement a ticking timer using moment.js in my presenational React component. As a first step, I wanted to just call a function every second but instead of getting the text the function should return, I'm getting an int value.

Any idea how I should implement this?

Here's my component:

import React, { PropTypes } from 'react';
import moment from 'moment';

const tickingTimer = () => {

   return "00:02:48";
}

const MyComponent = () => {

   return(
      <div>
         <div>{setInterval(tickingTimer(), 1000)}</div>
      </div>
   );
}

export default MyComponent;

When React renders the page, instead of seeing 00:02:48, I'm getting int values that go up 3 times e.g. 20, 21, 22

How do call a function that will return a value every second in my presentational component?

Why not check out the documentation for `setInterval` and see why it is doing what it's doing? — Trash Can, Jan 02 '18 at 06:09

Shubham Khatri · Accepted Answer · 2018-01-21T16:31:32.270

1

The reason for it is that setInterval returns a timerId which you can use later to clear the interval.

You need to save the returned value of function in state

import React, { PropTypes } from 'react';
import moment from 'moment';

const tickingTimer = () => {

   return "00:02:48";
}

const MyComponent class extends React.Component {
   state = { 
      timer: ''
   }
   componentDidMount(){
       setInterval(tickingTimer, 1000)
   }

   tickingTimer = () => {

     this.setState({timer:"00:02:48"});
    }
   return(
      <div>
         <div>{this.state.timer}</div>
      </div>
   );
}

export default MyComponent;

edited Jan 21 '18 at 16:31

answered Jan 02 '18 at 06:11

Shubham Khatri

270,417
55
406
400

Thank you. The only thing I need to figure out is implementing this in a presentational component. I don't think I can use `componentDidMount()` in a presenational component. – Sam Jan 02 '18 at 06:14
@Sam It makes zero sense to have a presentational component if you're going to have a timer. A timer by definition has internal state and presentational components shouldn't/can't have internal state. – Andrew Li Jan 02 '18 at 06:19
No you can't, either you need to paas it down from the parent – Shubham Khatri Jan 02 '18 at 06:19
In this particular case, my time is going to show me the hours, minutes and seconds passed since a set time which I store in my `Redux` store. That value is not changing. `moment` should simply be displaying the elapsed time since that set date/time. In this case, the state of my value is not changing. This is why I'm using `moment` and was going with a presenational component. – Sam Jan 02 '18 at 06:25
why do you need a setInterval then – Shubham Khatri Jan 02 '18 at 06:26
Here's why: say the value I pass to my presentational component is `3:45:10 PM`. I want to display a ticking timer that shows me how many hours, minutes and seconds since `3:45:10` – Sam Jan 02 '18 at 06:27
Maybe timer is the wrong word to use. It's not counting down. It should be counting up. Keeps calculating how much elapsed time since `3:45:10 PM` – Sam Jan 02 '18 at 06:28
You need a setInterval, but you can't get the returned value of the function executed in setInterval, the way to go forward is to extend the React.Component class and store it in state – Shubham Khatri Jan 02 '18 at 06:30
I can use a smart component. It's not a deal breaker. Just wanted to keep it simple by using a presenational component. Anyway, thanks for your help. – Sam Jan 02 '18 at 06:32
@ShubhamKhatri I implemented your code exactly the way you have it here. It displays the initial value but I don't think `setInterval` is working. The value never changes. Any idea why that might be? – Sam Jan 02 '18 at 06:50
Thats because in the implementation of `tickingTimer` you need to update the state with the correct value instead of a default string – Shubham Khatri Jan 02 '18 at 07:09

Calling function at set intervals in React presentational component

1 Answers1

Linked