Question

0

155

Views

setTimeout function does not display HTML after function ends

I have created a timeout function for 3 seconds and after that time it is supposed to render the HTML. I'm following the official documentation to do this and the code is like on the documentation. Anyone has had a similar issue?

render() {
return (
<div>
    {this.state.activePage === 'Home' ? setTimeout(function () {
        <p>Hello World</p>
    }, 3000) : null}
</div>
)
}

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T08:00:41.410Z

You should not write code like that in react. The setTimeout returns:

The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout(). T

and not the JSX which you returned from callback. But even if it did asynchronously return the JSX which you return from callback, you won't see the new content on the screen. To change UI in react you must change a state variable using setState which will cause a re render. Also render is not the place to call setState. You can call setState in useEffect for example.

Answer 2 · 2022-07-05T08:00:41.418Z

It is not possible to return a value from the function passed to setTimeout.

Here are two options you could try

Create a state field to store the message you want to display and update the state from inside of the setTimeout. Also such an update cannot be done inside of the return. You would want to move this logic to a component mount function.
Here is a more vanilla JS approach to this issue using promise objects Get return value from setTimeout

Also could you provide the document you are referring to for this code, so we can have a deeper dive onto the issue?

0

155

setTimeout function does not display HTML after function ends

2 answers

0

0

Find remote jobs

Andres GPT