How to call setTimeOut on a component class

Question

After calling setTimeOut(Question, 3000) I receive the error "Cannot call a class as a function". "Question" needs to be a class in order to get the lifecycle methods that classes receive.

The only answer I have found so far is to include "extends React.Component" on the class, which I have.

import React from 'react';
import Question from './Question';

setTimeout(Question, 3000);


function Congratulations(props) {
    return(
        <div>
        <h1>Congraulations you are the champion.</h1>
        <h2>Your Score: {props.score}</h2>
    </div>
    )
}  
export default Congratulations;

The first few lines of Question component class follows.

export default class Question extends React.Component {
constructor(props) {
    super(props);

I would like for Question to appear on the DOM after 3 seconds.

Fernando Colom · Accepted Answer · 2018-12-28 01:41:29Z

2

you can use in componentdidmount method and set state for show after 3 seconds. In render method, you can render only if show is true.

In the constructor method, create a state with show = false.

In componentDidMount yo can create

setTimeOut(() => this.setState({ show: true}), 3000)

In render method you can render with that state

{
 show &&
  // render what you want
}

answered Dec 28, 2018 at 1:41

Fernando Colom

3771 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kyle Laster Over a year ago

This worked perfectly. For future viewers, I would edit your post to setTimeout... Thanks, Fernando! I do have a follow-up question. Do you know what the, I assume to be, conditional statement in your render is called? I have not seen that syntax, and I would like to do further reading. (I am obviously new to this.)

Fernando Colom Over a year ago

If you refer to &&, that the operator tu eval the first arg (this case show) and if this is true, returns or render the sentence after &&. Also you have || that means 'or'. you can use with variable to eval the first arg too. const test = true || 'string' Its mean, if the first arg is true, test is equal to true. If not, is equal to 'string'.

R Esmond · Accepted Answer · 2018-12-27 19:45:36Z

0

The timeout isn't your problem, you just don't have Reacts setup code. Check out React-Dom's render method. You need to wrap the setup code in a function and then trigger that function with setTimeout. Even a React function component isn't going to do much if you call it directly, like what setTimeout would do.

answered Dec 27, 2018 at 19:45

R Esmond

1,2729 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to call setTimeOut on a component class

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related