Highlighting matched part in question search

src/components/Question.js

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