button Onclick call the function with React State - reactjs

Question

I am new to react,
I am trying to pass the values on the button onclick from one component to another.
Here is my following code:
contact Component:
import React,{useState} from 'react';
import Section from '../../../HOC/Section';
import apicall from '../../UI/JS/allapicall.js';
const Contact = () => {
const [name, setName] = useState(0);
console.log("name");
return (
<Section id='contact'>
<div className='container pt-2 pb-5'>
<div className='section-header pt-5 pb-5 text-center'>
<h3 className='section-title'>
<span>Get in touch with </span>Us
</h3>
<h6 className='section-subtitle mr-auto ml-auto'>
We are here with you
</h6>
</div>
<div className='section-content'>
<div className='row'>
<div className='col-md-9 col-lg-7 mr-auto ml-auto'>
{/* <form> */}
<div className='form-group'>
<input
type='text'
className='form-control rounded-0'
aria-describedby='emailHelp'
placeholder='Enter Name...'
onChange={e=>setName(e.target.value)}
/>
</div>
<div className='form-group'>
<input
type='email'
className='form-control rounded-0'
aria-describedby='emailHelp'
placeholder='Enter email...'
/>
</div>
<div className='form-group'>
<textarea
className='form-control rounded-0'
rows='5'
placeholder='Enter Message...'
/>
</div>
<div className='form-group text-center'>
<button className='btn btn-block btn-primary rounded-0 mr-auto ml-auto' onClick={apicall({name})}>
Send
</button>
</div>
{/* </form> */}
</div>
</div>
</div>
</div>
</Section>
);
};
export default Contact;
apicall.js:
export default function messagesubmit(test)
{
console.log(test);
const axios = require('axios');
// Optionally the request above could also be done as
axios.get('https://www.zohoapis.com/crm/v2/functions/ticket_create/actions/execute?auth_type=apikey', {
params: {
zapikey: "1003.9145fb5d691b5f95a194c17e56300ed3.1cc7246813d8d6842c47f543a4f50b8f"
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
}
Currently:
For each state changes(when I change the "Value" of the text field) the onClick button function is calling on react, and the console.log(test); is printing for every change in name, I don't know where I am doing wrong I need to trigger it on only onclick event.
Here is what I wanted:
For each field value, I need to store the values in states.
On button Click I need to pass the stored values in the state to message submit function within an argument,
Thanks in advance

Answer 1

<button className='btn btn-block btn-primary rounded-0 mr-auto ml-auto' onClick={apicall({name})}>
Send
</button>
Change this to:
<button className='btn btn-block btn-primary rounded-0 mr-auto ml-auto' onClick={() => apicall({name})}>
Send
</button>

Answer 2

Your button's onClick needs to be () => apicall({name}) instead of just apicall({name}). When you set the onClick to be apicall({name}) then what happens is apicall({name}) gets instantly called and the onClick is set to the result of that call.