Step-by-Step V1 Example

(Details about this example are on the overview page)

Steps:1234567891011121314

Step 14

• And, that's it. Here's the final file.

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            if (!filter) return true;
35            let name = invoice.name.toLowerCase();
36            return name.startsWith(filter.toLowerCase());
37          })
38          .map((invoice) => (
39            <NavLink
40              style={({ isActive }) => ({
41                display: "block",
42                margin: "1rem 0",
43                color: isActive ? "red" : "",
44              })}
45              to={`/invoices/${invoice.number}`}
46              key={invoice.number}
47            >
48              {invoice.name}
49            </NavLink>
50          ))}
51      </nav>
52      <Outlet />
53    </div>
54  );
55}

Steps:1234567891011121314