Write a Highlight component that wraps matches of a query in <mark>
Write Highlight({ text, query }). It renders text in a <p>, with every match of query wrapped in a <mark>. Matching ignores case, and each <mark> keeps the text's own case: Tea in Tea and tea, with the query TEA, marks both words as written.
The query is plain text, not a pattern: c++ and ( match those characters. An empty query marks nothing. Matches don't overlap: they're found from left to right. Don't use dangerouslySetInnerHTML: text like <b>tea</b> must show as written, not as bold.
export default function Highlight({ text, query }) {
return <p>{text}</p>;
}
- marks a match and keeps the whole text
- ignores case and keeps the text's own case
- treats the query as plain text
- marks nothing for an empty query
- shows HTML in the text as text
- marks back-to-back matches separately
- doesn't warn about keys
The answer
Write it yourself first. Then compare it with a reference solution and the checks it passes.
Checking your sign-in…