components.Highlight is updating object with highlighted string but doesn't render to view

Open Q&A
,
#1

I have a relatively complex object that I’m trying to use for Algolia’s autocomplete highlighter, I’m calling it like this:

<components.Highlight hit={hit.format[0].item} attribute='body' />

When I console.log the hit object I can see that it has a _highlightResult key, and going into format[0].item.body it has a value key which is the expected string with the highlight keywords like __aa-highlight__ and __/aa-highlight__ wrapped around the matching words. The trouble is, it doesn’t seem to render it to the view, it just shows the plain text version and not the highlighted version. Despite me passing in the nested fields to the Highlight component, do I have to do some additional configuration for it to then render it?

#2

Hi @s.baker,

You shouldn’t have to drill that far down into a hit object. You should pass the top level hit object to components.highlight along with the attribute and allow the method to extract the correct highlighted string.

Here’s an example from a recent project I was working on:

<p className="aa-ItemContentDescription">
    ...{preview.context.before.text} <components.Highlight hit={preview} attribute="text" /> 
    {preview.context.after.text}...
</p>

The function will not understand if you try to pin it to a specific attribute of your hit as the highlighted text doesn’t exist in that context.