Step-by-Step V1 Example

(Details about this example are on the overview page)

Steps:1234567891011121314

Step 5

• Now we'll starting adding some fuctonationly to the input tag.
• This line uses `searchParams` to grab data from the URL via `searchParams.get("filter")`
• The "filter" argument tells the code to look at the URL and grab a parameter named "filter" if it exists
• (... More explicaiton goes here about how value works ...)
• One you have the code in place you can see it populating the text box by adding `?filter=something` to the end of the URL like this `http://localhost:3000/invoices/1998?filter=howdy`
• You'll notice that you can't type in the box directly. We'll address that 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      />
23        {invoices
24          .map((invoice) => (
25            <NavLink
26              style={({ isActive }) => ({
27                display: "block",
28                margin: "1rem 0",
29                color: isActive ? "red" : "",
30              })}
31              to={`/invoices/${invoice.number}`}
32              key={invoice.number}
33            >
34              {invoice.name}
35            </NavLink>
36          ))}
37      </nav>
38      <Outlet />
39    </div>
40  );
41}

Steps:1234567891011121314