Highlighting matched part in question search

src/components/Question.js

@@ -1,9 +1,11 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 
-class Question extends PureComponent {
-  render() {
-    const { question } = this.props
+function highlightText(text, toHighlight) {
+  const re = new RegExp(toHighlight, 'gi')
+  return text.replace(re, `<mark>${toHighlight}</mark>`)
+}
 
+export default function Question({ question, searchTerm }) {
   let qdata = question.data
   if (typeof qdata === 'object' && qdata.type === 'simple') {
     qdata = ''
@@ -11,17 +13,29 @@ class Question extends PureComponent {
   if (qdata) {
     try {
       qdata = JSON.stringify(qdata)
-      } catch (e) {}
+    } catch (e) {
+      //
     }
+  }
+
+  const questionText = searchTerm
+    ? highlightText(question.Q, searchTerm)
+    : question.Q
+  const answerText = searchTerm
+    ? highlightText(question.A, searchTerm)
+    : question.A
 
   return (
     <div className="questionContainer">
-        <div className="question">{question.Q}</div>
-        <div className="answer">{question.A}</div>
+      <div
+        className="question"
+        dangerouslySetInnerHTML={{ __html: questionText }}
+      ></div>
+      <div
+        className="answer"
+        dangerouslySetInnerHTML={{ __html: answerText }}
+      ></div>
       <div className="data">{qdata || null}</div>
     </div>
   )
-  }
 }
-
-export default Question

src/components/QuestionSearchResult.js

@@ -73,7 +73,7 @@ export default function QuestionSearchResult({ data, searchTerm }) {
       <div>
         <div>{renderCount()}</div>
         <div>
-          <Questions subjs={subjs} />
+          <Questions subjs={subjs} searchTerm={searchTerm} />
         </div>
       </div>
     )

src/components/Questions.js

@@ -6,7 +6,7 @@ import styles from './Questions.module.css'
 
 class Questions extends PureComponent {
   render() {
-    const { subjs } = this.props
+    const { subjs, searchTerm } = this.props
 
     return (
       <div>
@@ -16,7 +16,13 @@ class Questions extends PureComponent {
             <div className={styles.questionBg} key={i}>
               <div className={styles.subjName}>{subj.Name}</div>
               {subj.Questions.map((question, i) => {
-                return <Question key={i} question={question} />
+                return (
+                  <Question
+                    key={i}
+                    question={question}
+                    searchTerm={searchTerm}
+                  />
+                )
               })}
             </div>
           )

src/pages/allQuestions.js

@@ -89,6 +89,7 @@ export default function AllQuestions({ router }) {
     const querySearch = router.query.question
       ? decodeURIComponent(router.query.question)
       : ''
+
     console.log(querySearch)
 
     fetchDbs().then((res) => {