CODEWITHSUNDEEP
javascriptandroidreact-nativeexpo
Crashendo Dt
Crashendo Dt

Reputation: 58

Expo/React Native error - TypeError: undefined is not an object (evaluating 'string.toLowerCase')

So I'm making an React Native app, I have server and db set up on heroku. Using expo to view it on the phone and in web browser on my pc.

On web, everything works right.

On phone, I get the error from the screenshot. I guess there's a problem with data not coming on time or maybe there's a different way of writing things?

Is there a way to get full app on phone without using android studio?

enter image description here

Here's the code related to error:

<TextInput
    style={styles.input}
    placeholder='Search...'
    onChange={(e) => { this.handleInput(e.target.value) }}
></TextInput>


handleInput = (value) => {
  if (value !== this.state.insertionIngredient) {
    this.setState({ ...this.state, insertionIngredient: value });
  };
};

handleFindButton = () => {
  this.setState({ ...this.state, isLoading: true });

  const id = searchString(this.state.insertionLanguage, this.state.data, 
                          this.state.insertionIngredient);
  const result = getById(this.state.queryLanguage, this.state.data, id);

  if (id === 'No such word in the database.' || result === 'No such word in the database.') {
    this.setState({ ...this.state, queryIngredient: 'No such word in the database.' });
  } else {
    this.setState({ ...this.state, queryIngredient: result });
  };
};

const searchString = (language, state, string) => {
  let array;
  if (language === 'english') {
      array = state.english;
  } else if (language === 'spanish') {
      array = state.spanish;
  } else if (language === 'german') {
      array = state.german;
  } else if (language === 'serbian') {
      array = state.serbian;
  };

  string = string.toLowerCase();
  let filter = escapeRegExp(string);
  let regex = new RegExp("^" + filter, "i");

  const word = array.filter(val => {
      return val.word.match(regex)
  });

  if (word.length > 0) {
      return word[0].id;
  } else {
      return 'No such word in the database';
  }};

How app looks

Upvotes: 0

Views: 3861

Answers (2)

Crashendo Dt
Crashendo Dt

Reputation: 58

Problem was that I used onChange method instead of onChangeText. So instead of this:

<TextInput
  style={styles.input}
  placeholder='Search...'
  onChange={(e) => { this.handleInput(e.target.value) }}
></TextInput>

I should have put this:

<TextInput
  style={styles.input}
  placeholder='Search...'
  onChangeText={(e) => { this.handleInput(e) }}
></TextInput>

Upvotes: 0

Bader
Bader

Reputation: 324

Just from reading the error, I believe you're running into situations when string is undefined. A simple work around would be to check if string exists, then apply toLowerCase to it if does. Example:

if (string) string = string.toLowerCase();

else console.log("string doesn't exist, look into it");

Upvotes: 1

Related Questions