React history.push auto redirect - reactjs

Question

I have implement a function to navigate to new screen when click a button in using media list in react bootstrap, but that function automatically called when screen is loading,
this is my code
function News() {
const history = useHistory()
const [eventData, setEventdata] = useState('');
const [MemberOffer, setMemberOffer] = useState('');
const [Loading, setLoading] = useState(true);
const [Loading2, setLoading2] = useState(true);
useEffect(() => {
getDatafromserver()
getallmemebroffers()
Logincheck()
}, []);
async function getDatafromserver() {
console.log("inside getDatafromserver funcation")
try {
await fetch('http://124.43.17.60:4000/getallevent')
.then((response) => response.json())
.then((json) => setEventdata(json.Rows))
.catch((error) => alert('Please check your network'))
.finally(() => setLoading(false))
console.log("rana data", eventData)
console.log("loding....", Loading)
} catch (error) {
console.log("error when get data from server")
}
}
async function getallmemebroffers() {
console.log("inside memebr offer funcation")
try {
await fetch('http://124.43.17.60:4000/memoffers')
.then((response) => response.json())
.then((json) => setMemberOffer(json.news))
.catch((error) => alert('Please check your network'))
.finally(() => setLoading2(false))
console.log("Member offers", MemberOffer)
console.log("loding....", Loading2)
} catch (error) {
console.log("error when get data from server")
}
}
const Logincheck = () => {
console.log("inside login check")
try {
Axios.get("http://124.43.17.60:4000/loging_check")
.then((response) => {
console.log("res cookie", response)
})
} catch (error) {
console.log("No internet")
}
}
function editNews(){
history.push('/admin/edit-news')
}
return (
<div className='home' >
<br></br>
<Card style={{ height: 'auto' }} >
{/* memebr offer */}
<Card.Header style={{ borderColor: 'white', fontSize: '30px', fontFamily: 'Quicksand-Bold' }}>Tech News</Card.Header>
{Loading2 ? <Loader type="Circles" color="#00BFFF" height={80} width={80} /> : (
<div>
{MemberOffer.map((object, index) => (
// <p key={index.id}>{object.event_name}</p>
<Card.Body >
<ul className="list-unstyled" style={{ marginLeft: '20px' }}>
<Media as="li">
<img
width={72}
height={72}
className="mr-3"
src={object.offer_image}
alt="Generic placeholder"
/>
<Media.Body style={{ marginLeft: '10px' }}>
<h5 style={{ fontSize: '20px', fontFamily: 'Quicksand-Bold' }}>{object.offer_name}</h5>
<p style={{ fontSize: '15px', fontFamily: 'Quicksand-Medium', color: '#707070' }}>
{object.offer_content}
</p>
</Media.Body>
<Button variant="primary" onClick={editNews()}>Edit</Button>
</Media>
<br></br>
</ul>
</Card.Body>
))}
</div>
)}
</Card>
</div >
)
}
export default News
when I'm reload the page this editNews() function already called and navigate to EditNews page without click the Edit button. Can any one tell me what I am doing wrong with in this code and please help me to solve this problem

Answer 1

Do not call the function in onClick. This should work.
<Button variant="primary" onClick={editNews}>Edit</Button>