react button is called before onPress when using Hooks - reactjs

Question

I am trying to request an API request using hooks. But my problem is that my function is called before I onPress.
I have an custom API component like this:
const FetchDataPut = (URL) => {
useEffect(() => {
async function fetchData() {
const res = await axios({
method: 'put',
url: URL,
data:{
name:'111',
email:'222',
password:'333',
id:'444',
phone:'555'
}
});
const response = await res;
console.log(response, 'completed')
}
fetchData()
},[])
return null
}
I could see from the console.log that api request has completed. My problem is that my api component is called before I onPress the button.
This is my Button component:
const EditAccount = (props) => {
const Desktop = () => {
const URL = `MyURL...`
return (
<View>
<Button title='edit account' onPress={FetchDataPut(URL)}/>
</View>
)
}
return(
<div>
<Desktop/>
</div>
)
}
If I change my onPress function to an arrow function like this:
onPress={()=>FetchDataPut(URL)} component isn't called before I onPress it. But it will give me an error Invalid hook call. Hooks can only be called inside of the body of a function component
Any Idea how to my the api request when I onPress the Button ?
Any comments or advice would be really helpful. Thanks in advance! :)

Answer 1

I think the way to go is to use a hook rather than a component:
const useFetchDataPut = () => {
const [url, setUrl] = useState("");
useEffect(() => {
if (!url) return;
async function fetchData() {
const res = await axios({
method: "put",
url,
data: {
name: "111",
email: "222",
password: "333",
id: "444",
phone: "555"
}
});
const response = await res;
console.log(response, "completed");
}
fetchData();
}, [url]);
return setUrl;
};
And then call it when you press the button. Also Desktop should be defined outside of the EditAccount component.
const Desktop = () => {
const setUrl = useFetchDataPut();
return (
<View>
<Button
title="edit account"
onPress={() => setUrl("https://...")}
/>
</View>
);
};
const EditAccount = props => {
return (
<div>
<Desktop />
</div>
);
};
Let me know if something is not clear.

Answer 2

There are several issues here.
You’re setting the onPress prop to the result of calling FetchDataPut(URL). The prop should be the function itself, not the result of invoking it. By using an arrow function you’re declaring a new function that, when invoked, calls FetchDataPut.
If you’re invoking it on button press, there’s no need for it to be a hook.
Also, FetchDataPut isn’t a React component.
Declare your data fetching function by itself:
async function fetchData(url) {
return axios({
method: 'put',
url: URL,
data: {
name:'111',
email:'222',
password:'333',
id:'444',
phone:'555'
}
})
}
And then invoke it on button press.
const handler = async function ( ) {
// or just inline the axios request right here
// instead of declaring a separate function for it.
const result = await fetchData(url);
// do something with the result
}
<Button onPress={handler} />
Apologies for the frequent edits. Trying to do this from my phone.