Step-by-Step V1 Example

(Details about this example are on the overview page)

Steps:1234567891011121314

Step 9

• This step makes things disappear for a bit.
• We're adding a `.filter()` to our loop throught he `invoices` array where we look at each `invoice` to see if it passes a test we apply or not.
• If an individual invoice passes the test criteria it passes on to the map function. Otherwise, it gets removed temporarily from the list
• We start by adding the `.filter()` in without and contents. Because there is no test, there is nothing to pass and all the items are filtered out. That' why nothing shows up
• If you get an error, the first thing to look at is the closing curly bracket and parethesis. It is very easy to mess those up.

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
34          })
35          .map((invoice) => (
36            <NavLink
37              style={({ isActive }) => ({
38                display: "block",
39                margin: "1rem 0",
40                color: isActive ? "red" : "",
41              })}
42              to={`/invoices/${invoice.number}`}
43              key={invoice.number}
44            >
45              {invoice.name}
46            </NavLink>
47          ))}
48      </nav>
49      <Outlet />
50    </div>
51  );
52}

Steps:1234567891011121314