How to Fetch the Data on Button Click using React Hooks - react-hooks

Question

I want to display the Child component on click on Button, But here I am getting the Data when the page loads,I need to write a condition like when Button Clicked , then only the Child component show display otherwise a default text should display there.
const DetailsCard = () => {
const [employee, setemployee] = useState([])
const [data, setData] = useState()
useEffect(() => {
fetch("http://localhost:3000/users").then(res => res.json()).then((result) => {
setemployee(result);
}, [])
})
const handleChange = () => {
setData(true);
}
return (
<div>
<h1>LordShiva</h1>
<div className="container">
<div className="row">
<div className="col">
<div className="card">
<div className="card-header bg-primary text-white">
<p className="h4">Birthday APP</p>
<button className="btn btn-red true1 " onClick={handleChange} >HappyBirthday</button>
</div>
<div className="card-body">
<TableCard data={employee} />
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default DetailsCard;

Answer 1

const DetailsCard = () => {
const [employee, setemployee] = useState([]);
const [showChild, toggleShowChild] = useState(false);
useEffect(() => {
fetch("http://localhost:3000/users")
.then((res) => res.json())
.then((result) => {
setemployee(result);
}, []);
});
const handleChange = () => {
toggleShowChild(!showChild);
};
return (
<div>
<h1>LordShiva</h1>
<div className="container">
<div className="row">
<div className="col">
<div className="card">
<div className="card-header bg-primary text-white">
<p className="h4">Birthday APP</p>
<button className="btn btn-red true1 " onClick={handleChange}>
HappyBirthday
</button>
</div>
{/* Only show child when `showChild` is true. */}
{showChild && (
<div className="card-body">
<TableCard data={employee} />
</div>
)}
</div>
</div>
</div>
</div>
</div>
);
};
export default DetailsCard;
Codesandbox

Answer 2

import React, { useState, useEffect } from "react";
const FetchAPI = () => {
const [data, setData] = useState([]);
const newData = data.slice(0, 12);
const [showData, setShowData] = useState(false);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((response) => response.json())
// .then((json) => console.log(json));
.then((json) => setData(json));
}, []);
const onClickhandler = () => {
setShowData(!showData);
};
return (
<>
<h1>Search</h1>
<ul>
{newData.map((item) => {
return showData ? (
<li style={{ listStyle: "none", marginTop: "10px" }} key={item.id}>
{item.title}
</li>
) : (
""
);
})}
</ul>
<button onClick = {onClickhandler}>
Fetch
</button>
</>
);
};
export default FetchAPI;