I wrote a function that connects to an API and fetches data:
import {API_KEY, API_URL} from "./constants";
export const getOperations = async (id, successCallback) => {
try {
const response = await fetch(`${API_URL}/tasks/${id}/operations`, {
headers: {
Authorization: API_KEY,
},
});
const data = await response.json();
if (data.error) {
throw new Error('Error!');
}
successCallback(data.data);
} catch (err) {
console.log(err);
}
};
In one of my React components, I use this function to retrieve data from the specified API by passing the required ID as props.
const [operations, setOperations] = useState([])
console.log(props)
useEffect(() => {
try {
getOperations(data => (props, setOperations(data)))
} catch(e) {
console.log(e)
}
}, [])
The issue arises because my API URL is structured differently causing a 400 error:
`...api/tasks/function%20(data)%20%7B%20%20%20%20%20%20%20%20return%20props,%20setOperations(data);%20%20%20`20%20%20%7D/operations`
I'm seeking guidance on how to format the API URL correctly for this situation:
/api/tasks/{id}/operations
Thank you in advance!