Step-by-Step V1 Example

(Details about this example are on the overview page)

Steps:1234567891011121314

Step 6

This is another minor step. We're adding an onChange event listener to the input tag.
We're not putting code in it yet. This is just a step to get us prepped for that. As before we' are leaving an empty line in place where the next step of code will go.
We still can't type in the input box, btw.

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
24        }}
25      />
26        {invoices
27          .map((invoice) => (
28            <NavLink
29              style={({ isActive }) => ({
30                display: "block",
31                margin: "1rem 0",
32                color: isActive ? "red" : "",
33              })}
34              to={`/invoices/${invoice.number}`}
35              key={invoice.number}
36            >
37              {invoice.name}
38            </NavLink>
39          ))}
40      </nav>
41      <Outlet />
42    </div>
43  );
44}