I have a property of 'inspection-link' that has a value of a URL that I'm pulling in from a JSON API.
"inspection-link": "https://qa.toromont.ca/ToromontCAT/ServiceHub/PublicInfo/ecomm/inspection?sku=N001|BFEN1868620151TLI45073",
Instead of simply displaying the "inspection-link" URL onto the pay, I need to be able to access the URL, and then display that information on the page.
The code I have below (<p>{jsonDataProduct?.["inspection-link"]}</p>) only displays the URL on the page in text, but of course I need to display that URL's data coming in from it's on JSON URL.
const PeriodicAnnualInspectionReport = ({
lang,
jsonDataProduct,
}: Props_PIReport) => {
return (
<div className="container">
<div className="row">
<div className="col-lg-12">
{}
<h2>
{outputEnFr(
"Periodic Annual Inspection Report",
"Rapport d'inspection annuel périodique",
lang
)}
</h2>
<p>{jsonDataProduct?.["inspection-link"]}</p>
</div>
</div>
</div>
);
};
export default PeriodicAnnualInspectionReport;
Then in the component mount using useEffect with empty array dependencies, and fetch the data from that URL, and set a state for it to update the UI, when data come.
const [data, setData] = useState()
useEffect(() => {
if (jsonDataProduct) {
fetch(jsonDataProduct["inspection-link"]).then(response => response.json())
.then(data => setData(data));
}
}, [])
Then you can output the data come from that json URL