scrimba
Frontend Career Path
Advanced React
React Router
Relative Links
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

AboutCommentsNotes
Relative Links
Expand for more info
pages
Host
HostVanDetail.jsx
run
preview
console
import React from "react"
import { useParams, Link } from "react-router-dom"

export default function HostVanDetail() {
const { id } = useParams()
const [currentVan, setCurrentVan] = React.useState(null)

React.useEffect(() => {
fetch(`/api/host/vans/${id}`)
.then(res => res.json())
.then(data => setCurrentVan(data.vans))
}, [])

if (!currentVan) {
return <h1>Loading...</h1>
}

return (
<section>
<div className="host-van-detail-layout-container">
<div className="host-van-detail">
<img src={currentVan.imageUrl} />
<div className="host-van-detail-info-text">
<i
className={`van-type van-type-${currentVan.type}`}
>
{currentVan.type}
</i>
<h3>{currentVan.name}</h3>
<h4>${currentVan.price}/day</h4>
</div>
</div>
</div>
</section>
)
}
Console
/host/vans/1
-7:01