Step-by-Step V1 Example

(Details about this example are on the overview page)

Steps:1234567891011121314

Step 10

Here we start to get things ready to filter proplerly by setting up a `filter` variable with the value from the URL that we pull in via the `searchParams.get()` call.
By using `filter` as the parameter passed to `searchParams.get()` we pull that value from the query string portion of the URL (TKTKTKTK put in details about the query string in the earlier step)

File: routes/invoices.jsx

1import {
2  NavLink,
3  Outlet,
4  useSearchParams,
5} from "react-router-dom";
6import { getInvoices } from "../data";
7
8export default function Invoices() {
9  let invoices = getInvoices();
10  let [searchParams, setSearchParams] = useSearchParams();
11
12  return (
13    <div style={{ display: "flex" }}>
14      <nav
15        style={{
16          borderRight: "solid 1px",
17          padding: "1rem",
18        }}
19      >
20      <input 
21        value={searchParams.get("filter") || ""}
22        onChange={(event) => {
23          let filter = event.target.value;
24          if (filter) {
25              setSearchParams({ filter });
26          } else {
27              setSearchParams({});
28          }
29        }}
30      />
31        {invoices
32          .filter((invoice) => {
33            let filter = searchParams.get("filter");
34          })
35          .map((invoice) => (
36            <NavLink
37              style={({ isActive }) => ({
38                display: "block",
39                margin: "1rem 0",
40                color: isActive ? "red" : "",
41              })}
42              to={`/invoices/${invoice.number}`}
43              key={invoice.number}
44            >
45              {invoice.name}
46            </NavLink>
47          ))}
48      </nav>
49      <Outlet />
50    </div>
51  );
52}