Search implementation in Remix - Mini Project: Build & Apply

Search implementation

📖 Scenario: You are building a simple search feature for a website that lists books. Users will type a search term, and the page will show only the books whose titles include that term.

🎯 Goal: Create a Remix route component that displays a list of books and filters them based on a search query typed by the user.

📋 What You'll Learn

Create an array of book objects with exact titles and ids

Add a search query string variable to hold the user's input

Filter the books array using the search query to show matching titles

Render the filtered list of books in the component

💡 Why This Matters

🌍 Real World

Search features are common on websites to help users find content quickly, such as products, articles, or books.

💼 Career

Implementing search with state and filtering is a fundamental skill for frontend developers working with React and Remix.

1

Create the books data array

Create a constant array called books with these exact objects: { id: 1, title: 'The Great Gatsby' }, { id: 2, title: 'Moby Dick' }, { id: 3, title: 'Hamlet' }.

Remix

// Create the books array with the given objects
// Your code here

Hint

Use const books = [ ... ] with the exact objects inside.

2

Add a search query state variable

Add a React state variable called searchQuery initialized to an empty string using useState.

Remix

const books = [
  { id: 1, title: 'The Great Gatsby' },
  { id: 2, title: 'Moby Dick' },
  { id: 3, title: 'Hamlet' }
];

// Add useState for searchQuery
// Your code here

Hint

Import useState and create searchQuery with useState('').

3

Filter books based on search query

Create a constant called filteredBooks that filters books to include only those where title.toLowerCase() includes searchQuery.toLowerCase().

Remix

import { useState } from 'react';

const books = [
  { id: 1, title: 'The Great Gatsby' },
  { id: 2, title: 'Moby Dick' },
  { id: 3, title: 'Hamlet' }
];

const [searchQuery, setSearchQuery] = useState('');

// Filter books by searchQuery
// Your code here

Hint

Use books.filter and check if book.title.toLowerCase() includes searchQuery.toLowerCase().

4

Render the search input and filtered list

Return JSX that includes an <input> with value={searchQuery} and onChange updating setSearchQuery, and a <ul> listing filteredBooks with each <li> showing book.title and having key={book.id}.

Remix

import { useState } from 'react';

const books = [
  { id: 1, title: 'The Great Gatsby' },
  { id: 2, title: 'Moby Dick' },
  { id: 3, title: 'Hamlet' }
];

const [searchQuery, setSearchQuery] = useState('');

const filteredBooks = books.filter(book =>
  book.title.toLowerCase().includes(searchQuery.toLowerCase())
);

// Return JSX with input and filtered list
// Your code here

Hint

Use an <input> with value and onChange to update searchQuery. Then map filteredBooks to <li> elements inside a <ul>.