Why does setTimeout return a number instead of text? ReactJS

Question

I'm working with Reactjs and I need to show a message using a setTimeout but it always returns a number to me. Does anyone know the reason?

This is my code:

  messageError = () => {
       return <h1>Error!</h1>
  }

render() {
  return (
   ...
     { this.props.error.code != undefined ?
                            setTimeout(() => { this.messageError() }, 3000) : null }

Thanks!

Because setTimeout does not return anything like you think here. It returns a positive integer and executes something. Here you are invoking your function but its return value can't be rendered like that. What is your intention here? Why do you want a delay? — devserkan
– devserkan, Commented Sep 6, 2018 at 3:55
developer.mozilla.org/en-US/docs/Web/API/… should tell you all you need to know. — Jon P
– Jon P, Commented Sep 6, 2018 at 3:59
Then render your component according to this error condition. You don't need any delay here. Even if you need you can't use setTimeout like that. — devserkan
– devserkan, Commented Sep 6, 2018 at 4:02

Kishan Mundha · Accepted Answer · 2018-09-06 04:03:10Z

3

I guess you are doing wrong way. As my understanding you want something else. I'm giving yu one example, it might help.

class MyComponent {
  state = {
    error: false,
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        error: true,
      })
    }, 3000);
  }

  renderMessageError() {
    return <h1>Error</h1>
  }

  render() {
    if (this.state.error) {
      return this.renderMessageError();
    }

    return null; //
  }
}

answered Sep 6, 2018 at 4:03

Kishan Mundha

3,15120 silver badges26 bronze badges

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

3 Comments

devserkan Over a year ago

Damn, I was going to give nearly the exact same code :) With a 2 seconds delay and some ternary operator :)

OscarDev Over a year ago

Your code helped me, I solved it using componentWillReceiveProps. Thanks.

Kishan Mundha Over a year ago

I would not suggest to use componentWillReceiveProps, this is going to deprecated in newer version of react. reactjs.org/docs/…

Tonitrnel · Accepted Answer · 2018-09-06 04:01:38Z

2

This is an asynchronous and you can't expect its return value. The number is the ID of setTimeout, used to clear setTimeout.

answered Sep 6, 2018 at 4:01

Tonitrnel

1851 silver badge13 bronze badges

Comments

Michael Lorton · Accepted Answer · 2018-09-06 04:01:27Z

1

Because that is what is supposed to do.

setTimeout doesn't pause execution for the indicated time. It schedules your function to occur later and then returns a value (which is typically a number) that can be used to call that schedule.

The function obviously cannot return a value from the future.

answered Sep 6, 2018 at 4:01

Michael Lorton

44.7k26 gold badges111 silver badges159 bronze badges

Collectives™ on Stack Overflow

Why does setTimeout return a number instead of text? ReactJS

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related