Step-by-Step V1 Example

(Details about this example are on the overview page)

Steps:1234567891011121314

Step 4

Here, we'll add an initial <input /> tag.
A new text box will show up on the page that you can type in, but it won't do anything else yet.
We'll leave an empty line between the opening and closing of the tag where we'll write the code to add functionality in the next steps

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
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}