I would like to search for motorycle images by make, model year, how would I do this with the code provided?
I get the Image of each motorcylce by its articleId, then accessing to the image link in a new fetch request.
The code in my main page where I catch the articleID and send it as a prop to MotoImage Component.
import MotoImage from “@/components/MotoImage”;
async function getData() { const url =“https://motorcycle-specs-database.p.rapidapi.com/make/Yamaha/model/yz125”; const options = { method: “GET”, // headers: { “X-Api-Key”: “a141PyUM3f7JoY2ZTlY6kg==ZlAiGNVYjYlSD9IO” }, headers: { “X-RapidAPI-Key”: “7f84114117msh60749b07331b46ep1a4c46jsn837104533757”, “X-RapidAPI-Host”: “motorcycle-specs-database.p.rapidapi.com”, }, }; try { const response = await fetch(url, options); const result = await response.json(); return result; } catch (error) { console.error(error); } }
async function HomePage() { const data = await getData(); return ( <div className=“space-y-4”> {data.slice(0, 3).map((item) => ( <div key={item.articleCompleteInfo.articleID}> <h2>{item.articleCompleteInfo.makeName}</h2> <p>{item.articleCompleteInfo.articleID}</p> <MotoImage articleID={item.articleCompleteInfo.articleID} /> </div> ))} </div> ); } export default HomePage;
MOTOIMAGE.JSX COMPONENT import Image from “next/image”;
async function getImage(articleID) { const url = https://motorcycle-specs-database.p.rapidapi.com/article/${articleID}/image/link; const options = { method: ‘GET’, headers: { ‘X-RapidAPI-Key’: ‘7f84114117msh60749b07331b46ep1a4c46jsn837104533757’, ‘X-RapidAPI-Host’: ‘motorcycle-specs-database.p.rapidapi.com’ } };
https://motorcycle-specs-database.p.rapidapi.com/article/${articleID}/image/link
try { const response = await fetch(url, options); const result = await response.json(); return result; } catch (error) { console.error(error); } }
// Pass articleID as prop async function MotoImage({ articleID }) { //Call the getImage function passing articleID and saving the returned data in image const image = await getImage(articleID)
return ( <Image src={image.link} alt="Moto Image" width={248} height={248} /> ) }
export default MotoImage
Aşağıya yorum ekleyerek tartışmaya katılın:
I get the Image of each motorcylce by its articleId, then accessing to the image link in a new fetch request.
The code in my main page where I catch the articleID and send it as a prop to MotoImage Component.
import MotoImage from “@/components/MotoImage”;
async function getData() {
const url =“https://motorcycle-specs-database.p.rapidapi.com/make/Yamaha/model/yz125”;
const options = {
method: “GET”,
// headers: { “X-Api-Key”: “a141PyUM3f7JoY2ZTlY6kg==ZlAiGNVYjYlSD9IO” },
headers: {
“X-RapidAPI-Key”: “7f84114117msh60749b07331b46ep1a4c46jsn837104533757”,
“X-RapidAPI-Host”: “motorcycle-specs-database.p.rapidapi.com”,
},
};
try {
const response = await fetch(url, options);
const result = await response.json();
return result;
} catch (error) {
console.error(error);
}
}
async function HomePage() {
const data = await getData();
return (
<div className=“space-y-4”>
{data.slice(0, 3).map((item) => (
<div key={item.articleCompleteInfo.articleID}>
<h2>{item.articleCompleteInfo.makeName}</h2>
<p>{item.articleCompleteInfo.articleID}</p>
<MotoImage articleID={item.articleCompleteInfo.articleID} />
</div>
))}
</div>
);
}
export default HomePage;
MOTOIMAGE.JSX COMPONENT
import Image from “next/image”;
async function getImage(articleID) {
const url =
https://motorcycle-specs-database.p.rapidapi.com/article/${articleID}/image/link
;const options = {
method: ‘GET’,
headers: {
‘X-RapidAPI-Key’: ‘7f84114117msh60749b07331b46ep1a4c46jsn837104533757’,
‘X-RapidAPI-Host’: ‘motorcycle-specs-database.p.rapidapi.com’
}
};
try {
const response = await fetch(url, options);
const result = await response.json();
return result;
} catch (error) {
console.error(error);
}
}
// Pass articleID as prop
async function MotoImage({ articleID }) {
//Call the getImage function passing articleID and saving the returned data in image
const image = await getImage(articleID)
return (
<Image
src={image.link}
alt="Moto Image"
width={248}
height={248}
/>
)
}
export default MotoImage