Question

112

render a component after some time with setTimeout ( ReactJs)

rated 0 times [ 116] [ 4] / answers: 1 / hits: 6548 / 3 Years ago, mon, august 30, 2021, 12:00:00

I want to render one component inside my App.Js after some time pass with setTimeout, there is any way to do that?

when I try, nothing happens...

my code:

function App() {

  return (

    <Router>

      <GlobalStyle />



      <SearchProvider>

        <Header />



        <Switch>

          <Route exact path="/">

            {setTimeout(() => {

              return;

              <>

                <InitialLoad />

                <Home />

              </>;

            }, 1200)}

          </Route>



          <Route exact path="/series">

            <Series />

          </Route>

          <Route exact path="/movies">

            <MoviesPage />

          </Route>

          <Route exact path="/popular">

            <PopularPage />

          </Route>

          <Route exact path="/resultado-de-busca">

            <SearchPage />

          </Route>

        </Switch>

      </SearchProvider>

    </Router>

  );

}

want my InitialLoad and Home Components show after 1200 time, but nothing happens, how I fix it, please?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tajo

Add To Favorites

Follow

Total Points: 415

Total Questions: 124

Total Answers: 103

Location: North Korea

Member since Tue, Jun 16, 2020

4 Years ago

tajo questions

1 Module not found: Error: Can't resolve 'fs' react js

Wed, Apr 6, 22, 00:00, 2 Years ago

1 How to install nanoid in nodejs?

Wed, Jan 26, 22, 00:00, 2 Years ago

1 How to convert HTML content to PDF in Angular

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Using native javascript / subtleCrypto to encrypt using RSA

Fri, Jul 17, 20, 00:00, 4 Years ago

1 Override style for Collapse of antd react component library

Thu, Feb 6, 20, 00:00, 4 Years ago

View All

answered 3 Years ago braeden · Accepted Answer

If you want to do that in the Route:

import { useState } from "react";



function App() {



const [isDisplayed, setIsDisplayed] = useState(false);



useEffect(() => {

  setInterval(() => {

    setIsDisplayed(true);

  }, 1200);

}, []);



return (

    <Router>

      <GlobalStyle />



      <SearchProvider>

        <Header />



        <Switch>

          <Route exact path="/">

            {isDisplayed &&

              <>

                <InitialLoad />

                <Home />

              </>;

            }

         </Route>

      //the rest of your component