CODEWITHSUNDEEP
react-nativereact-hooks
Martin La Regina
Martin La Regina

Reputation: 73

How to update useState into TextInput

I have a simple <TextInput> in React Native and i want to print some text when value change. Its working after second character entered, but not, when user press just one char. I try using functions and even with onChange and take from e.target.value but allways are missing one character at "search" state.

import React, { useState } from 'react';
import { TextInput, View, Text } from 'react-native';

const App = () => {
  const [search, setSearch] = useState('');
  const [searching, setSearching] = useState(false); 
  return(
    <View>
      <TextInput 
        onChangeText={(value) => {
          setSearch(value)
          setSearching(search=='' ? false : true)
        }}
        value = { search }
      />
      {
        searching ?
        (
          <Text>Searching</Text>
        ) : (
          <Text>No searching</Text>
        )
      }
    </View>
  );
} 

export default App

I expect to show "Searching" when TextBox value are not empty.

Upvotes: 4

Views: 13495

Answers (3)

Martin La Regina
Martin La Regina

Reputation: 73

After help of both i resolved. This is the code if help to somebody. The idea are a TextInput with a len icon on the left, and when user start to write made the call to Firebase and show a loading icon on the right (spinner).

    <Icon
      name='search'
      size={25} 
      color={PRIMARY_BACKGROUND_COLOR}
      style={styles.searchIcon}
    />
    <TextInput 
      underlineColorAndroid = 'transparent' 
      style = { styles.textBox }
      onChangeText={(value) => { onChangeText(value) }}
      value = { search }
      placeholder = { i18n.t('Search') }
    />
    {
      searching ?
      (
        <TouchableOpacity style = { styles.visibilityBtn }> 
          <Animatable.View
          ref={ref => (this.AnimationRef = ref)}
          animation='rotate'
          easing='linear'
          iterationCount='infinite'
          >
            <Icon
              name='spinner-3'
              size={20}
              color={PRIMARY_BACKGROUND_COLOR}
            />
          </Animatable.View>
        </TouchableOpacity>
      ) : (
        <TouchableOpacity onPress={ clearSearch } style = { styles.visibilityBtn }>
          <Icon
            name='close'
            size={20}
            color={PRIMARY_BACKGROUND_COLOR}
          />
        </TouchableOpacity>
      )
    }

And the function

  const onChangeText = value => {
    setSearch(value)
    setSearching(value =='' ? false : true)
    Helper.getCategoriesSearch(value, (categories) => {
      setSearching(false)
      //props.searchResults(categories); THIS DO NOT WORK RETURN DATA TO props :(
    })
  }

Thanks All

Upvotes: 0

Ewe Tek Min
Ewe Tek Min

Reputation: 865

useState or setState may be asynchronous, so the first time you call setSearch(value), the search state may not be updated yet.

onChangeText={(value) => {
  setSearch(value)
  setSearching(search == '' ? false : true) // "search" is still previous value
}}

Instead, you can directly use value instead for checking.

onChangeText={(value) => {
  setSearch(value)
  setSearching(value == '' ? false : true) // value is latest
}}

Upvotes: 8

Vencovsky
Vencovsky

Reputation: 31645

You need to compare the actual value of the TextInput

Using search=='' ? false : true will check the previous state and won't change

onChangeText={(value) => {
  setSearch(value)
  setSearching(search=='' ? false : true)
}}

This will check for the changed value. 

onChangeText={(value) => {
  setSearch(value)
  setSearching(value == '' ? false : true) // use value
}}

You need to use value instead of search

Just change this 

setSearching(search=='' ? false : true)

to 

setSearching(value=='' ? false : true)

Upvotes: 2

Related Questions