useEffect call different API onClick - reactjs

Question

I am working with useEffect and want to figure out how to call a different API when an onClick event happens. When my page loads the following is run:
useEffect(() => {
if (userData.user) {
axios
.get(`http://localhost:5000/reviews/reviews?email=${userData.user.email}`, userData)
.then((response) => {
console.log(response)
setReview(response.data)
});
}
}, [userData]);
however when a user selects an onClick event on the webpage, I want a different API to be called and for the data from the original request to disappear. Here is the second request I want to send:
axios
.get(`http://localhost:5000/reviews/reviews?reviewNumber=1`)
.then(response => {
console.log(response)
setallreviews(response.data)
})
Adding the page code here as requested:
return(
<div>
{userData.user ? (
<div>
<div>
<FeedbackNav />
</div>
<div>
<div>
{filterMode ? (
<div onClick={() => setFilterMode(false)}>
<h1 className='testing123'>My reviews and feedback</h1>
<p className='testing1234'>Reviews are reviews that you have provided on another project</p>
<p className='testing1234'>Feedback is feedback that others have provided on your own project</p>
<button className='rectangle' onClick={() => setFilterMode(false)}>
<img className='filterImage' src={Filter} />Filter
</button>
<ul className='filteroptions'>
<p className='allreviewsfeedback' onClick={() => {
setFilterMode();
getReviews();
}}>My reviews</p>
<p className='myfeedback' onClick={() => {
setFilterMode();
}}>My feedback</p>
</ul>
</div>
) : (
<div>
<h1 className='testing123'>My reviews and feedback</h1>
<p className='testing1234'>Reviews are reviews that you have provided on another project</p>
<p className='testing1234'>Feedback is feedback that others have provided on your own project</p>
<button className='rectangle' onClick={() => setFilterMode(true)}>
<img className='filterImage' src={Filter}/>
Filter
</button>
</div>
)}
</div>
<div className='testing1234'>
{allreviews.map(allreviews => (
<p key={allreviews._id}>{allreviews.review}</p>
))}
</div>
<div className='testing1234'>
{review.map(review => (
<p key={review._id}>{review.review}</p>
))}
</div>
</div>
</div>
) : (
<div>
<Landing />
</div>
)}
</div>
)
}
What is the best way to do this? Thank you!

Answer 1

You can do something like this:
const [clicked, setClicked] = useState(false);
const handleClick = () => {
setClicked(true);
};
useEffect(() => {
if (clicked) {
axios
.get(`http://localhost:5000/reviews/reviews?reviewNumber=1`)
.then(response => {
console.log(response)
setallreviews(response.data)
setReview(null);
});
} else if (userData.user) {
axios
.get(`http://localhost:5000/reviews/reviews?email=${userData.user.email}`, userData)
.then((response) => {
console.log(response)
setReview(response.data)
});
}
}, [userData]);
return (
<div>
some text...
<button onClick={handleClick}>Click!</button>
</div>
);

Answer 2

Listen to search params and call axios.get if search params changed.
const { search } = useLocation(); // import { useLocation } from 'react-router-dom';
useEffect(() => {
if (!search) return;
axios.get(`http://localhost:5000/reviews/reviews${search}`).then();
}, [search]);