Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from "react";
function ButtonLoad() {
const [isLoadingData, setisLoadingData] = React.useState(false);
const [data, setData] = React.useState([]);
const [showData, setShowData] = React.useState(false);
const handleClick = () => {
setisLoadingData(true);
setShowData(true)
const url = "https://randomuser.me/api/?results=15";
fetch(url)
.then((response) => response.json())
.then((json) => {
setisLoadingData(false);
setData(json["results"])
console.log(data);
})
.catch((error) => console.log(error));
};
return (
<div>
<button onClick={handleClick}> Load Data </button>
{showData ? (
isLoadingData ? (
<h1>LOADING DATA........</h1>
) : (
data.map((user) => (
<h1>
{user.name.first} {user.name.last}
</h1>
))
)
) : (
<div></div>
)}
</div>
);
}
export default ButtonLoad;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment