write code according to requirement: Requirements: Create new page in pages folder Add page into the pages.jsx under main For path property use /search/* In page use const location = useLocation(); to determine the search term Display list of matching results Each course should link to /course/courseCode If the search results are empty write not found message. Implement the above using the following input: const searchResults = [ // array will be empty if no matches were found. { courseCode: string, description: string }, { courseCode: string, description: string }, { courseCode: string, description: string }, { ... }, { ... }, { ... }, ... ];

11 upvotes

3 years and 7 months later

GPT-3.5

March 5, 2023

Here's a sample code that meets the requirements: First, create a new page named SearchResults.jsx in the pages folder: jsx Copy code import React from 'react'; import { useLocation } from 'react-router-dom'; const SearchResults = ({ searchResults }) => { const location = useLocation(); const searchQuery = location.pathname.split('/search/')[1]; // Filter the searchResults based on the search query const filteredResults = searchResults.filter(result => { return ( result.courseCode.toLowerCase().includes(searchQuery.toLowerCase()) || result.description.toLowerCase().includes(searchQuery.toLowerCase()) ); }); return ( <div> {filteredResults.length === 0 ? ( <p>No matching results found.</p> ) : ( <ul> {filteredResults.map(result => ( <li key={result.courseCode}> <a href={`/course/${result.courseCode}`}>{result.courseCode}</a> - {result.description} </li> ))} </ul> )} </div> ); }; export default SearchResults; Then, add the SearchResults page to the pages.jsx file under main with a path of /search/*: jsx Copy code import React from 'react'; import { Switch, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Contact from './Contact'; import SearchResults from './SearchResults'; const Main = ({ searchResults }) => ( <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> <Route path="/search/*" render={() => <SearchResults searchResults={searchResults} />} /> </Switch> ); export default Main; Note that in the SearchResults component, we're using useLocation from the react-router-dom library to get the current location and extract the search query from the URL. We're then filtering the searchResults array based on the search query and rendering the filtered results as a list. If there are no matching results, we're displaying a message. Each course in the list is linked to its corresponding course page using the course code.

GPT-6 Astra

October 19, 2026

1. Create `pages/Search.jsx`

This assumes search URLs look like /search/javascript.

import { Link, useLocation } from "react-router-dom";

export default function Search({ searchResults = [] }) {
  const location = useLocation();

  const encodedTerm = location.pathname.replace(/^\/search\/?/, "");

  let searchTerm;
  try {
    searchTerm = decodeURIComponent(encodedTerm);
  } catch {
    searchTerm = encodedTerm;
  }

  return (
    <section>
      <h1>Search results{searchTerm ? ` for "${searchTerm}"` : ""}</h1>

      {searchResults.length === 0 ? (
        <p>No matching courses found.</p>
      ) : (
        <ul>
          {searchResults.map(({ courseCode, description }) => (
            <li key={courseCode}>
              <h2>
                <Link to={`/course/${encodeURIComponent(courseCode)}`}>
                  {courseCode}
                </Link>
              </h2>
              <p>{description}</p>
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}

2. Add the route in `pages.jsx` under the existing main route

The following uses React Router v6. Keep your existing main layout import and other routes.

import { Route, Routes } from "react-router-dom";
import Main from "./layouts/Main"; // Use your existing main layout path.
import Search from "./pages/Search";

export default function Pages({ searchResults = [] }) {
  return (
    <Routes>
      <Route path="/" element={<Main />}>
        {/* Other existing main routes */}

        <Route
          path="/search/*"
          element={<Search searchResults={searchResults} />}
        />
      </Route>
    </Routes>
  );
}

Pass your provided results array into Pages:

<Pages searchResults={searchResults} />

The main layout must render an <Outlet /> for nested pages. This implementation treats searchResults as the already-matched results for the current search term.

What changed

The sharpest difference is how each read the input. The prompt says the array “will be empty if no matches were found,” meaning the results arrive already matched. GPT-3.5 filters them a second time anyway, and it calls toLowerCase() on a search term that would be undefined at a bare /search URL. Astra says outright that it “treats searchResults as the already-matched results” and simply renders them. One could argue GPT-3.5’s filtering at least gives useLocation a real job, since Astra uses the term only for a heading. But Astra’s reading fits the stated input.

Astra also follows the requirements more closely. It nests the route “under the existing main route” and notes that Main needs an <Outlet />. GPT-3.5 instead invents Home, About and Contact routes. Astra uses <Link> rather than GPT-3.5’s plain <a href>, which reloads the whole page, and it adds URL decoding and encoding. GPT-3.5’s React Router v5 Switch was reasonable in early 2023, so that difference is about timing, not a mistake.

Analysis by Claude Opus 5.5, comparing the two answers above.

1. Create pages/Search.jsx

2. Add the route in pages.jsx under the existing main route

What changed

1. Create `pages/Search.jsx`

2. Add the route in `pages.jsx` under the existing main route