Wrong result and highlight does not work in a deep level

If I have a data structured like this one and search by “Bull” instead to return only the second item. it returns everything.

Another issue is the highlight component. Does not highlight anything.

{
  "position": "a",
  "items": [
    {
      "acronym": "aec",
      "title": "Arch, Eng and Const",
      "description": "A fsdjf klfjsdlkfjsdkjf, kjfdksljf, kjfsdkfjlsd"
    },
    {
      "acronym": "abc",
      "title": "Arch, Bull and Const",
      "description": "A fsdjf klfjsdlkfjsdkjf, test, kjfsdkfjlsd"
    }
  ],
  "objectID": "68555910"
}

My current component test implementation:

function Result({ hits }) {
  return (
    hits.map((hit) => {
      return (
        <div key={hit.objectID}>
          <li>
            <div>
              <span>
                {hit.position}
              </span>
            </div>
          </li>
          {
            hit.items.map((item) => {
              return (
                <li>
                <div>
                  <label>
                    {/* <Highlight attributeName="title" hit={hit} /> */}
                    {item.title}
                  </label>
                </div>
                <div>
                  <p>
                    {item.description}
                  </p>
                </div>
              </li>
              );
            })
          }
        </div>
      );
    })
  );
}

const CustomResult = connectHits(Result);

export default function Main() {
  return (
    <AlgoliaSearch>
      <SearchBox />
      <ul className='result'>
        <CustomResult />
      </ul>
    </AlgoliaSearch>
  );
}

Any idea what could be wrong in my implementation?

Hi @serraventura, just did a small live example showing you that highlight works: https://codesandbox.io/s/3yzryxy6l1

Just type anything in searchbox and you can see it.

Do check that your title attribute is searchable in your dashboard here (“ranking” tab):
image

By default all searchable attributes will be available for highlighting. But if you override the setting in display with another list then it might be that title is not available for highlighting, check in your dashboard in the “display” tab.

image

Reading your example, it seems like those “items” should be two different hits if you want the behaviour you are asking for.

Let me know how it goes. If you want further help, do update the example I gave you so it’s easier to see what’s not working for you. Thanks!