Step-by-Step V1 Example

(Details about this example are on the overview page)

Steps:1234567891011121314

Step 12

• Next to last step. We're almost there.
• We want out filter to match the name of the invoice, but we need that to happen without it being case sensitive. (Otherwise, if we tried to filter for `example` but our invoice name was `Excample` with an uppercase `E`, it wouldn't match)
• To deal with the case, this line makes a copy of the invoice name, but mushes it down so everything is lower case. By doing the same thing with our filter in the next step we get a case-insensitive search.
• All the invoices still show up if the input text box for the search is empty. They also still disappear if anything is put in the text input. That gets fixed in the next, and final 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            if (!filter) return true;
35            let name = invoice.name.toLowerCase();
36          })
37          .map((invoice) => (
38            <NavLink
39              style={({ isActive }) => ({
40                display: "block",
41                margin: "1rem 0",
42                color: isActive ? "red" : "",
43              })}
44              to={`/invoices/${invoice.number}`}
45              key={invoice.number}
46            >
47              {invoice.name}
48            </NavLink>
49          ))}
50      </nav>
51      <Outlet />
52    </div>
53  );
54}

Steps:1234567891011121314