React increment likes to an API endpoint - reactjs

Question

Im trying to make a system of likes for each recipe that i have on my page. The endpoint works, i basically pass the id and when i submit, it increments the number of likes by one of that recipe.
Im trying to make the frontend part for it.
Basically im building a custom hook with
import { useState, useEffect } from "react";
import axios from "axios";
const useLikes = (id) => {
const [like, setLike] = useState();
useEffect(() => {
(async (id) => {
const response = await axios.post(`
https://obscure-river-28733.herokuapp.com/recipe/like/${id}
`);
setLike(response.data);
})(like);
});
console.log("like" + like);
return like;
};
export default useLikes;
Now this is the part im a bit stuck on what to do.
Im bulding the icon like this
import React from "react";
import { BsHeart } from "react-icons/bs";
import useLikes from "./useLikes";
const Likes = ({ id }) => {
const likes = useLikes(id);
return (
<BsHeart
likes={id}
color="red"
size={18}
onClick={() => console.log(likes)}
/>
);
};
export default Likes;
And on the app component inside my map i call it like this
<Likes likes={record.id} />
id comes undifined so its not making the post to nothing viable. Could anyone help me solve this please?

Answer 1

Your Likes component should be defined like this:
const Likes = ({ likes: id }) => {
or change the prop name when calling it
<Likes id={record.id}/>
Api call is asynchronous so it should be done simply inside an asynchronous function
const useLikes = async (id) => {
const response = await axios.post(`
https://obscure-river-28733.herokuapp.com/recipe/like/${id}
`);
return response.data;
};
Then in the Likes component you can use the useLikes function like this
const [likes, setLikes] = useState(0);
useLikes(id).then((res) => setLikes(res));