{searchResults.map((course) => <div> <li> <Link to={`/course/${course.courseCode}/`}> {course.courseCode} - {course.description} </Link> </li> <hr /> </div> )} extend this code so it shows "sorry, not found" if searchResults is empty

12 upvotes

3 years and 7 months later

GPT-3.5

March 5, 2023

To extend the code to show "sorry, not found" if searchResults is empty, you can add a conditional statement that checks if the array is empty. If it is, display the message "sorry, not found" instead of rendering the course list. Here's an example of how you can modify the code: javascript Copy code {searchResults.length > 0 ? ( searchResults.map((course) => ( <div key={course.courseCode}> <li> <Link to={`/course/${course.courseCode}/`}> {course.courseCode} - {course.description} </Link> </li> <hr /> </div> )) ) : ( <p>Sorry, not found.</p> )} In this modified code, the ternary operator checks if searchResults.length is greater than 0. If it is, the course list is rendered using the map function as before. The key attribute is added to the div element to help React identify each element in the list. If searchResults is empty, the message "sorry, not found" is rendered instead, wrapped in a p element. Note that in the original code, there was no need to add the key attribute to the div element since it was not being used in a list. However, when rendering a list using the map function, it's important to add a unique key to each element to help React optimize the rendering process.

GPT-6 Astra

October 19, 2026

{searchResults.length > 0 ? (
  searchResults.map((course) => (
    <div key={course.courseCode}>
      <li>
        <Link to={`/course/${course.courseCode}/`}>
          {course.courseCode} - {course.description}
        </Link>
      </li>
      <hr />
    </div>
  ))
) : (
  <p>sorry, not found</p>
)}

What changed

The code is nearly identical: both use a ternary on searchResults.length > 0, both add key={course.courseCode} to the div, and both fall back to a paragraph. The real difference is in what surrounds it. GPT-3.5 explains the change clearly, then undercuts itself with a closing note claiming the original code had “no need to add the key attribute” because it “was not being used in a list.” The original was a map, so the key was missing there too. That sentence is simply wrong and could confuse a learner.

Astra returns only the code, with no explanation, and keeps the requested wording exactly (“sorry, not found”) where GPT-3.5 capitalized it. Astra also adds the key without mentioning it, which is a small missed chance to teach. Neither answer points out that an li wrapped in a div isn’t valid inside a list, so both inherit that quirk unchanged.

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