Step-by-Step V1 Example

(Details about this example are on the overview page)

Steps:1234567891011121314

Step 7

• Now we'all add a line to set a variable named filter inside our onChange listener.
• This code takes the event (TKTKTK more info on events) of which the 'target' is the element itself. In our case, that's the 'input' tag.
• The `.value` captures whatever the value of the input text box is at the time of the event. In other words, whatever is in the input box gets pulled into the `filter` variable
• Still can not type in the text box. That gets fixed in the next 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        }}
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}

Steps:1234567891011121314