Tengo un archivo js que contiene datos que estoy representando en la página usando useState . Tengo una Display de botón que usa la fetch API para obtener más datos y mostrar debajo de los datos existentes.
Me gustaría mostrar Loading cuando se hace clic en el Display button hasta que lleguen los datos.
El problema es que la página completa se representa con Loading . Me gustaría mostrar los datos que obtengo del archivo js tal como están y simplemente mostrar Loading debajo del botón Display hasta que obtenga más datos de la API
const [isLoading, setIsLoading] = useState(false); if (isLoading) { return <h2>Loading..</h2>; } const fetchData = async () => { setIsLoading(true); const response = await fetch(fetchDataUrl); const data = await response.json(); setIsLoading(false); setMoreData(data.datas); };const Component = () => { const [isLoading, setIsLoading] = useState(false); const fetchData = () => { setIsLoading(true) fetch(someUrl) .then(data => { setData(data) setIsLoading(false) }); } return ( <> {yourData.map((data) => <IdkMaybeItsSomeComponent data={data}>} { isLoading ? <h2>Loading...</h2> : <button onClick={fetchData}>Get More Data</button> } </> ) }¿Qué tal algo así? Solo muestra la carga en la parte inferior cuando actualmente está cargando datos.