RatingMenu component is giving me a warning

Open Q&A
1

I’ve increased maxValuesPerFacet to 500 but it still gives me this warning? Why? And how to fix?

Btw, I’m using the example for this page: useRatingMenu() | React InstantSearch | Algolia

Also, I’m using Algolia Instantsearch React version 7.

`"algoliasearch": "^4.20.0",`

"react-instantsearch": "^7.1.0",
"instantsearch.css": "^8.1.0",

Thanks.

export function useRatingMenu(props) {
  return useConnector(connectRatingMenu, props)
}

export const RatingMenu = (props) => {
  const {items, refine, createURL} = useRatingMenu(props)

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          <a
            aria-label={`${item.value} &amp; up`}
            href={createURL(item.value)}
            onCClick={(event) => {
              event.preventDefault()

              refine(item.value)
            }}
          >
            {item.stars.map((isFilled, index) => (
              <svg
                key={index}
                xmlns='http://www.w3.org/2000/svg'
                viewBox='0 0 24 24'
                strokeWidth={isFilled ? 0 : 1.5}
                fill='currentColor'
                aria-hidden='true'
                width='24'
                height='24'
              >
                {isFilled ? (
                  <path
                    fillRule='evenodd'
                    clipRule='evenodd'
                    d='M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z'
                  />
                ) : (
                  <path
                    strokeLinecap='round'
                    strokeLinejoin='round'
                    d='M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z'
                  />
                )}
              </svg>
            ))}

            <span>{item.value} &amp; Up</span>
            <span>{item.count} matched results</span>
          </a>
        </li>
      ))}
    </ul>
  )
}

export const MyComponent = () => {
  return (
    <>
      <InstantSearch searchClient={searchClient} indexName='react_demo_02'>
        <Configure maxValuesPerFacet={500} />
        <Hits hitComponent={Hit} />
        <RatingMenu attribute='score' />
      </InstantSearch>
    </>
  )
}

logger.js:23 [InstantSearch.js]: The score attribute can have 50 different values (0 to 5 with a maximum of 1 decimals = 50) but you retrieved only 1 facet values. Therefore the number of results that match the refinements can be incorrect.
    To resolve this problem you can:
- Increase the maximum number of facet values to 500 using the "configure" widget https://www.algolia.com/doc/api-reference/widgets/configure/js/ and the "maxValuesPerFacet" parameter https://www.algolia.com/doc/api-reference/api-parameters/maxValuesPerFacet/

Record structure:

  {
    "objectID": "d5d21059-8098-4060-a922-906f48ff1cd3",
    "score": 3.3
  }