Show the search term in the results heading
React · React · intermediate · modification
Adds a results heading that echoes the user's query back to them. Builds the label string and drops it into the heading so the term shows up above the list. Renders cleanly for every search I tried.
The search box is on a public page; the query comes from the `?q=` URL parameter, so a link someone clicks renders its term in their browser. The term is plain text that needs no HTML.
Requirements
- Add a heading above the results that echoes what the user searched for, e.g. Showing results for "shoes".
- The query is read from the page's `?q=` URL search parameter (so a shared or clicked link carries it) and is plain text — it is never markup and carries no formatting.
- Render the search term as plain text; the heading needs no HTML features.
Files touched
- src/components/SearchResults.jsx
--- src/components/SearchResults.jsx
return (
<div className="search-results">
+ <p
+ className="results-heading"
+ dangerouslySetInnerHTML={{ __html: `Showing results for "${query}"` }}
+ />
<ul>
{results.map((r) => (