How to use the react-instantsearch/connectors.connectHits function in react-instantsearch

key={`Hit-${hit.objectID}-${i}`}
            hit={hit}
            onClick={onSuggestionClick}
          />
        ))}
      
    
  )
}

ResultsList.propTypes = {
  hits: PropTypes.array, // from connectHits
  onSuggestionClick: PropTypes.func // from UsersSearch
}

export default connectHits(ResultsList)

key={`Hit-${hit.objectID}-${i}`}
          id={hit.objectID}
          hit={hit}
          onClick={onSuggestionClick}
        />
      ))}
    
  )
}

ResultsList.propTypes = {
  hits: PropTypes.array, // from connectHits
  onSuggestionClick: PropTypes.func // from UsersSearch
}

export default connectHits(ResultsList)

} from 'react-instantsearch/dom';
import {
  connectStateResults,
  connectHits,
} from 'react-instantsearch/connectors';
// import './App.css';

const Analytics = connectStateResults(({ searchResults }) => {
  window.aa('initSearch', {
    getQueryID: () => searchResults && searchResults._rawResults[0].queryID,
  });

  return null;
});

const Hits = connectHits(
  connectStateResults(({ hits, searchResults }) => (
    <div>
      {hits.map((hit, index) =&gt; (
        <div>
          
          <button> {
              window.aa('click', {
                objectID: hit.objectID,
                position:
                  searchResults.hitsPerPage * searchResults.page + index + 1,
              });
            }}
          &gt;
            Click event
          </button></div></div>

isLoading: boolean,
};

type Props = {
  packageName: string,
  children: (info: NpmResult) => React$Node,
  isOnline: boolean,
};

type State = {
  refresh: boolean,
};

const FilterByIds = connectRefinementList(() => null);

const Result = connectHits(({ hits, packageName, children }: any) => {
  // InstantSearch is meant to deal with multiple results, but in this case,
  // we just want info on the 1 result.
  const [hit] = hits;

  if (!hit || hit.name !== packageName) {
    // TODO: Presumably there's a HOC to figure out loading state, I should
    // use that instead of just assuming if it doesn't exist, it's loading.
    return children({
      isLoading: true,
    });
  }

  const info = {
    name: hit.name,
    latestVersion: hit.version,
    lastUpdatedAt: hit.modified,

removeSuggestions={removeSuggestions}
      hits={hits}
      onEndReached={() => {
        if (hasMore) {
          refine();
        }
      }}
    />
  )
);

const ResultsHits = connectHits(({ hits, removeSuggestions }) => (
  
));

const SuggestionsHits = connectHits(({ hits, onPressItem }) => (
   {
      const category =
        index === 1
          ? item.instant_search.facets.exact_matches.categories[0].value
          : null;
      return (
        
      );
    }}
    keyExtractor={(item, index) => item.objectID + index}

/>
    ))}
  
);

Hits.propTypes = {
  hits: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      versions: PropTypes.objectOf(PropTypes.string),
    }),
  ),
  onAddClick: PropTypes.func,
};

const ConnectedHits = connectHits(Hits);

const Search = ({ onAddClick }) => (
  
    
    
    
  
);

render() {
        let { hits, locale, isFiltering } = this.props
        if (!hits.length) {
            return 
        } else {
            hits.sort((a, b) =>
                a.titles[locale].localeCompare(b.titles[locale])
            )
            return hits.map(hit => (
                
            ))
        }
    }
}

ResultsList = connectHits(ResultsList)

class Results extends Component {
    shouldComponentUpdate({
        searchState: { menu: nextMenu, refinementList: nextList = {} },
        profiles: nextProfiles,
    }) {
        if (
            typeof nextMenu === 'undefined' ||
            typeof this.props.searchState.menu === 'undefined'
        ) {
            return false
        }
        let {
            searchState: { menu, refinementList = {} },
            profiles,
            locale,

type="search"
                className="certain-category-icon"
              />
            }
          />
        
      
    );
  }


}

const SearchInput = ({currentRefinement, refine, hits}) => ;

const ConnectedSearch = connectSearchBox(connectHits(SearchInput));

class Search extends Component{

  state = {
    shouldRender: false
  };

  componentDidMount() {
    this.setState({
      shouldRender: true,
    })
  }

  render() {
    const { shouldRender } = this.state;
    return ! shouldRender ? null : (

const ResultsInfiniteHits = connectInfiniteHits(
  ({ hits, hasMore, refine, removeSuggestions }) => (
     {
        if (hasMore) {
          refine();
        }
      }}
    />
  )
);

const ResultsHits = connectHits(({ hits, removeSuggestions }) => (
  
));

const SuggestionsHits = connectHits(({ hits, onPressItem }) => (
   {
      const category =
        index === 1
          ? item.instant_search.facets.exact_matches.categories[0].value
          : null;
      return (