How to convert it to html element?

Question

I'm trying to create a function that highlights words in a sentence. Here is the corresponding code.

highlightText = () => {
        const {
            questionItem,
        } = this.props;
        const words = questionItem.split(/\s+/);
        const highlighted = words.map((word, index) => (
            <span key={index} className="highlighted-word">{word}</span>
        ));
        const text = highlighted.join(' ');
        console.log(text);
        console.log({ highlighted });
        return highlighted;
    }

Here, if I console "text", I get [Object object], so I return "highlight" and then use reduce to join it.

const text3 = <p>{this.highlightText().reduce((prev, curr) => [prev, ' ', curr])}</p>;

I want to use this "text3" in the component. The problem is that I get "text3" as

I want it to be an HTML element so I can use it in my component. How can I convert it? Also, if I display

{this.highlightText().reduce((prev, curr) => [prev, ' ', curr])}

directly in the web page instead of Using it in my component works fine.

Answer 1

Just create a new component with props. Try this...

export default function HighlightText({text}) {
 return <span className="Add_HighlightText_Class" >{text}</span>