CODEWITHSUNDEEP
javascriptreactjsreact-nativealgoliareact-instantsearch
MANOJ H M
MANOJ H M

Reputation: 117

React native Algolia Search undefined is not an object

import React, { Component } from "react";
import PropTypes from "prop-types";
import { View, StyleSheet, TextInput } from "react-native";
import algoliasearch from "algoliasearch/lite";
import { InstantSearch } from "react-instantsearch-native";
import {
  connectSearchBox,
  connectInfiniteHits,
  connectHits,
  connectAutoComplete,
  connectStateResults,
} from "react-instantsearch/connectors";
import { FlatList } from "react-native-gesture-handler";
class SearchBox extends Component {
  render() {
    return (
      <View style={styles.searchBoxContainer}>
        <TextInput
          style={styles.searchBox}
          onChangeText={(query) => {
            this.props.refine(query);
          }}
          placeholder={"Search Gangs"}
          clearButtonMode={"always"}
          clearButtonMode={"always"}
          spellCheck={false}
          autoCorrect={false}
          autoCapitalize={"none"}
        />
      </View>
    );
  }
}
const ConnectedSearchBox = connectSearchBox(SearchBox);
class InfiniteHits extends Component {
  onEndReached = () => {
    if (this.props.hasMore) {
      this.props.refine();
    }
  };
  render() {
    return (
      <FlatList
        renderItem={({ item }) => (
          <View>
            <Text>{item.basicData.selectedStudentName}</Text>
          </View>
        )}
        data={this.props.hits}
        keyExtractor={(item) => item.objectID}
        onEndReached={this.onEndReached}
        ItemSeparatorComponent={() => <View style={styles.ItemSeparator} />}
      />
    );
  }
}
const ConnectedInfiniteHits = connectInfiniteHits(InfiniteHits);
class SearchGangsAlgolia extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log(this.props);
    return (
      <View
        style={{
          flex: 1,
          alignItems: "center",
          flexDirection: "column",
          paddingTop: 20,
        }}
      >
        <InstantSearch
          appId=""
          apiKey=""
          indexName="criminals"
        >
          <ConnectedSearchBox />
          <ConnectedInfiniteHits />
        </InstantSearch>
      </View>
    );
  }
}

const styles = StyleSheet.create({});

export default SearchGangsAlgolia;

Here in the above code, I'm trying to fetch data from algolia, as search results but, I'm getting error in the page as "Type error, undefined is not an object(Evaluating 'client.addAlgoliaAgent') this error is located at InstantSearch. I don't know whether which npm package to install or to import from any of npm package. But it's throwing error in instantsearchThis type of error I'm getting".

Upvotes: 0

Views: 847

Answers (1)

Mulweli Mushiana
Mulweli Mushiana

Reputation: 371

If anybody is still looking for the answer, the reason why you're getting this error is because you did not include the property searchClient in your InstantSearch component

install algoliasearch (npm install algoliasearch ) and import it and use it like this:

import algoliasearch from "algoliasearch/lite";

create the searchClient as follows

 const searchClient = algoliasearch("appId", "apiKey");

then finally include it in your InstantSearch component like this:

  <InstantSearch
      appId=""
      apiKey=""
      indexName="criminals"
      searchClient={searchClient}
    >
       <ConnectedSearchBox />
      <ConnectedInfiniteHits />
    </InstantSearch>

It worked for me

Upvotes: 1

Related Questions