Search implementation in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the hook used for reading URL search parameters in Remix.

Remix

import { [1] } from "@remix-run/react";

Drag options to blanks, or click blank then click option'

AuseActionData

BuseNavigate

CuseLoaderData

DuseSearchParams

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useLoaderData instead, which is for loader data, not URL params.

Using useNavigate which is for navigation, not reading search params.

The useSearchParams hook lets you read and update the URL's query string in Remix.

2fill in blank

medium

Complete the code to get the current search query from the URL parameters.

Remix

const [searchParams] = [1]();
const query = searchParams.get("q") || "";

Drag options to blanks, or click blank then click option'

AuseSearchParams

BuseActionData

CuseLoaderData

DuseNavigate

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to get searchParams from useLoaderData which does not provide URL params.

Using useNavigate which is for navigation, not reading params.

useSearchParams returns an array where the first element is the current URL search parameters object.

3fill in blank

hard

Fix the error in the loader function to read the search query from the request URL.

Remix

export async function loader({ request }) {
  const url = new URL(request.[1]);
  const q = url.searchParams.get("q") || "";
  return { q };
}

Drag options to blanks, or click blank then click option'

Amethod

Bbody

Curl

Dheaders

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.body which is a stream, not a URL string.

Using request.method which is the HTTP method, not the URL.

The request.url property contains the full URL string, which you can pass to the URL constructor to access search parameters.

4fill in blank

hard

Fill both blanks to create a form that submits the search query using GET method and updates the URL.

Remix

<form method=[1] action="/search">
  <input type="search" name=[2] aria-label="Search query" />
  <button type="submit">Search</button>
</form>

Drag options to blanks, or click blank then click option'

A"get"

B"post"

C"q"

D"query"

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST method which sends data in the body, not URL.

Using a different input name that doesn't match the query parameter.

Using method="get" makes the form submit the query in the URL. The input's name must match the query parameter key, here "q".

5fill in blank

hard

Fill all three blanks to display the search query from loader data and update the input value accordingly.

Remix

export default function SearchPage() {
  const data = useLoaderData();
  return (
    <main>
      <form method="get">
        <input
          type="search"
          name="q"
          aria-label="Search query"
          defaultValue=[1]
        />
        <button type="submit">Search</button>
      </form>
      <p>Showing results for: <strong>[2]</strong></p>
      <ul>
        {data.results?.map((item) => (
          <li key={item.id}>{item.[3]</li>
        ))}
      </ul>
    </main>
  );
}

Drag options to blanks, or click blank then click option'

Adata.q

Ctitle

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'value' instead of 'defaultValue' which makes the input controlled without onChange.

Displaying the wrong property from items, like 'name' instead of 'title'.

The input's defaultValue and the displayed query text both come from data.q. The list shows each item's title property.