CODEWITHSUNDEEP
javascriptreactjssetinterval
Ujjawal Jaiswal
Ujjawal Jaiswal

Reputation: 33

How to use setInterval with React?

I want the following app to print DAnce every second on the screen.

import React from 'react';
import ReactDOM from 'react-dom';

export class Sample extends React.Component {
    sample(text, i) {
        return <h1> DAnce</h1>;
    }

    render(){
        return (
            <div className="text-intro" id="site-type">  
                {setInterval(()=>this.sample('igod',1),1000)}
            </div>
        );
    }
}

ReactDOM.render(
  <Sample />,
  document.getElementById('root')
);

Instead I get 5 printed on the screen.
How do I obtain the desired effect?

Upvotes: 3

Views: 161

Answers (5)

Eddy Decena
Eddy Decena

Reputation: 1

What if you use the react lifecycle:

export class Sample extends React.Component {
sample(text, i) {
        this.setState({ text });
}
render(){
    return(
        <div className="text-intro" id="site-type">
            <h1>{this.state.text}</h1>
            {setTimeout(()=>this.sample('igod',1),1000)}
        </div>
    );
}

Upvotes: 0

Krina Soni
Krina Soni

Reputation: 930

You have used setTimeout which will be called only number of times while component renders.

You need to use setInterval to work each second.

Replace with this. Hopw this will help you.

{setInterval(()=>this.sample('igod',1),1000)}

Upvotes: 0

B G Hari Prasad
B G Hari Prasad

Reputation: 178

Try this, 

import React from 'react';
import ReactDOM from 'react-dom';

export class Sample extends React.Component {
sample(text, i) {
    return <h1> DAnce</h1>;
}
   render(){
      return(
         <div className="text-intro" id="site-type">
         {setTimeout(()=>{this.sample('igod',1)}, 1000)}
         </div>
      );
   }
}
ReactDOM.render(
   <Sample />,
document.getElementById('root')
);

Upvotes: 1

Tholle
Tholle

Reputation: 112787

You could store a count in your state, and use an interval to increment this count every second and create count many Dance in the render method.

Example

class Sample extends React.Component {
  state = { count: 0 };

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(previousState => {
        return { count: previousState.count + 1 };
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div className="text-intro" id="site-type">
        {Array.from({ length: this.state.count }, () => <div>Dance</div>)}
      </div>
    );
  }
}

ReactDOM.render(<Sample />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Upvotes: 3

Jo&#227;o Cunha
Jo&#227;o Cunha

Reputation: 10307

You have to think has the text as something that is changing in your app. That is ideal for state.

I don't know what your functions sample does. But let's say you have it declared.

const sample = (text, i) => { ... };

Then you can do it like this:

class Sample extends Component {
  state = {
    text: sample('igod', 1),
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        text: this.sample('igod',1)
      });
    }, 1000);
  }

  render() {
    return (
      <div className="text-intro" id="site-type">
        {this.state.text}
      </div>
    );
  }
}

Basically what happens is, when your component mounts you will start a timeout where every 1 second it will update the state thus updating your UI.

Upvotes: 2

Related Questions