Conditional API Fetching using ReactApp Javascript - reactjs

Question

I need some help with my code where it has to display the API data when the condition is the following
use componentWillReceiveProps()
when count == 2 it will fetch api
import React, {useState, useEffect,Component} from "react";
var x = 2;
const App =() => {
const [hasError, setErrors]= useState(false)
const [apps, setApps] = useState ("Loading");
useEffect(()=>{
async function fetchData(){
const res = await fetch ("https://m2dzass19b.execute-api.ap-southeast-1.amazonaws.com/dev/api/vdrOptimize/21-09-2019");
res
.json()
.then(res => setApps(res))
.catch(err => setErrors(err))
}
fetchData();
} );
return(
<div>
<span>{JSON.stringify(apps)}</span>
<hr/>
</div>
);
}

Answer 1

Okay here's the solution
Change your useEffect as this
useEffect(() => {
async function fetchData() {
const res = await fetch(
"https://m2dzass19b.execute-api.ap-southeast-1.amazonaws.com/dev/api/vdrOptimize/21-09-2019"
);
res
.json()
.then(res => setApps(res))
.catch(err => setErrors(err));
}
if (props.id === 2) {
fetchData();
}
}, [props.id]);
Hope it helps
UPDATE: This is how you can do it using comonentWillReceiveProps
UNSAFE_componentWillReceiveProps(nextProps) {
async function fetchData() {
const res = await fetch(
"https://m2dzass19b.execute-api.ap-southeast-1.amazonaws.com/dev/api/vdrOptimize/21-09-2019"
);
res
.json()
.then(res => this.setState({ apps: res }))
.catch(err => this.setState({ hasError: err }));
}
if (nextProps.id === 2) {
fetchData.call(this);
}
}
Sandbox
Note: componentWillReceiveProps() is deprecated lifecycle method