How to use React Highligher-CodePudding

I'm having a text editor that stores edited value in a state called "value" like shown below. When I show a preview of the text it comes like this

<p>This is the value intially</p>

So I'm using parse(value) to render content correctly.

Now when I'm using react Highlighter document as per instruction here and passing this parsed value.

I'm not getting anything.


 const [value, setValue] = useState('This is the value intially');

const getValue =()=>{
    return          <div>{parse(value)}</div>
}

    </div>



                    <Highlighter
    highlightClassName="YourHighlightClass"
    searchWords={["and", "or", "the"]}
    autoEscape={true}
    textToHighlight={getValue}
      

                    </div>

How to fix this problem?

CodePudding user response：

So texttoHighlight doesn't JSX value and also the string lies inside like this.

I made this change

const getValue =()=>{
   return parse(value).props.children
}

CodePudding user response：

Your error is that you need to provide a string value to textToHighlight

Like:

<p>
  <Highlighter
    highlightClassName="YourHighlightClass"
    searchWords={["and", "or", "the"]}
    autoEscape={true}
    textToHighlight="This is the value intially"
  />
</p>