Dentro de render(), return(), estoy tratando de establecer un tiempo de espera pero no funciona.
¿Estoy haciendo algo mal?
{setTimeout(() => { filtered.length && ( <FilterListContainer containerHeight={this.state.filterContainerHeight} > <FilterListScroll> <FilterList ref={this.filterListRef}> {filtered.map((k) => ( <SidebarFilter key={k} type={k} filter={this.props.body_search_filter[k]} handleChange={this.handleFilterChange} /> ))} </FilterList> </FilterListScroll> </FilterListContainer> ); }, 1)}Has dicho que no quieres que ese contenido aparezca hasta "un poco más tarde".
Para hacer eso, le gustaría tener un miembro del estado que diga si mostrar el contenido, usarlo al renderizar y tener el setTimeout que cambia el valor del miembro del estado.
Por ejemplo, aquí hay un ejemplo usando ganchos:
const { useState, useEffect } = React; const Example = () => { const [showList, setShowList] = useState(false); useEffect(() => { const handle = setTimeout(() => { setShowList(true); }, 800); // Longer delay so you can see it }, []); return <div> <div>Hi there</div> {showList && <div>This is the list</div>} </div>; }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Example />); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.development.js"></script>