If one of your attributes has \n
in its JSON string the InstantSearch will not display the value as a line break. This is because the Hits widget renders the attribute value as HTML. You can however use the transformItems function to replace the \n
string with <br>
which is the HTML line break and achieve the desired result.
Here's a working CodeSandBox showing this in action and below is the example data used in the first hit returned.
"name": "Amazon - Fire TV Stick with Alexa Voice Remote - Black",
"description": "Enjoy smart access to videos,\n games and apps \n with this Amazon Fire TV stick. \n Its Alexa voice remote lets you deliver hands-free commands when you want to watch television or engage with other applications. With a quad-core processor, 1GB internal memory and 8GB of storage, this portable Amazon Fire TV stick works fast for buffer-free streaming.",
Here's the relevant code for the transformItems function that replaces the \n
string with <br>
.
transformItems(items) {
return items.map((item) => ({
...item,
description: item.description.replace(/(?:\r\n|\r|\n)/g, '<br>'),
}));
},
Comments
0 comments
Article is closed for comments.