scrimba
Frontend Career Path
Advanced React
React Router
Challenge: Filter the vans with a setter function
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

Challenge: Filter the vans with a setter function
AboutCommentsNotes
Challenge: Filter the vans with a setter function
Expand for more info
pages
Vans
Vans.jsx
run
preview
console
import React from "react"
import { Link, useSearchParams } from "react-router-dom"

export default function Vans() {
const [searchParams, setSearchParams] = useSearchParams()
const [vans, setVans] = React.useState([])

const typeFilter = searchParams.get("type")

React.useEffect(() => {
fetch("/api/vans")
.then(res => res.json())
.then(data => setVans(data.vans))
}, [])

const displayedVans = typeFilter
? vans.filter(van => van.type === typeFilter)
: vans

const vanElements = displayedVans.map(van => (
<div key={van.id} className="van-tile">
<Link to={`/vans/${van.id}`}>
<img src={van.imageUrl} />
<div className="van-info">
<h3>{van.name}</h3>
<p>${van.price}<span>/day</span></p>
</div>
<i className={`van-type ${van.type} selected`}>{van.type}</i>
</Link>
</div>
))

/**
* Challenge: change the Links to buttons and use the
* setSearchParams function to set the search params
* when the buttons are clicked. Keep all the classNames
* the same.
*/

return (
<div className="van-list-container">
<h1>Explore our van options</h1>
<div className="van-list-filter-buttons">
<Link
to="?type=simple"
className="van-type simple"
>Simple</Link>
<Link
to="?type=luxury"
className="van-type luxury"
>Luxury</Link>
<Link
to="?type=rugged"
className="van-type rugged"
>Rugged</Link>
<Link
to="."
className="van-type clear-filters"
>Clear filter</Link>

</div>
<div className="van-list">
{vanElements}
</div>
</div>
)
}
Console
/vans
-2:30