Issue with Highlighting Search Terms in react-highlight-words in Next.js Application

[W-Schkulov]

Hi everyone,

I’m currently working on a Next.js project and trying to implement text highlighting using the react-highlight-words library. I have a component called EmotionCard where I need to highlight search terms within the notes field of the emotion object.

Here’s what I’ve tried so far:

•	I pass the searchTerm prop to the Highlighter component, but it doesn’t seem to highlight the matching words in the notes content.
•	I’m using searchWords={[searchTerm]} and textToHighlight={emotion.notes} as recommended in the documentation.

Despite this, nothing happens. The words are not highlighted, and no errors are showing up in the console. I’m also using styled-components in my project.

Has anyone faced a similar issue or could provide some insights into how I can get this feature working correctly in a Next.js app?

Any help or suggestions would be greatly appreciated!

Thanks!

[NikRoe]

Hi Wladimir,

I have not worked with this library yet, but I will gladly take a look and see if we can figure something out together.

Can you share the branch with me where you tried implementing this feature?

Thanks in advance.

[W-Schkulov]

feature/search-bar

[W-Schkulov]

wenn du ein paar minuten hast, kannst du auch in Entenraum 3 vorbeischauen :)

[NikRoe]

Sag gerne Bescheid, sobald du bereit bist

[W-Schkulov]

bin bereit!

[NikRoe]

The underlying issue was that the searchTerm prop was undefined and we fixed it by passing it down from /pages/index.js.