showMore() is not a function

Open Q&A
, , ,
#1

Hi I’m trying to implement a infiniteHits list with a show more button and a custom html output.

I found the way to do it on this page : infiniteHits | InstantSearch.js | Algolia

under showMore.

everything works fine (all my items are showing), excpet that when I click on the show more button my console return showMore is not a function.

I have just copy/past this code but show more doens’t seem to be a function:

const renderInfiniteHits = (renderOptions, isFirstRender) => {
  const { hits, showMore } = renderOptions;
  const container = document.querySelector('#infinite-hits');

  if (isFirstRender) {
    const ul = document.createElement('ul');
    const button = document.createElement('button');
    button.textContent = 'Show more';

    button.addEventListener('click', () => {
      showMore();
    });

    container.appendChild(ul);
    container.appendChild(button);

    return;
  }

  container.querySelector('ul').innerHTML = `
    ${hits.map(item => `<li>${item.name}</li>`).join('')}
  `;
};