CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-nativereact-native-component
King Of Missionary
King Of Missionary

Reputation: 149

React Native: onPress() is being called infinitely at render of component and won't work when I press the icon

Below Is some of my code. It seems my component is rendering infinitely, and the onPress() function on the icons is being called every time it renders, but won't work when I actually click on the JSX element. I have tried binding the function using this, as suggested in similar posts and that didn't seem to work.

`

function SearchScreen({ navigation }) {
    const [text, setText] = useState('')

  const [users, setUsers] = useState([])

  const fetchData = (category) => {
    fetch("https://stonernautz.com/companies.json")
      .then(response => {
        return response.json()
      })
      .then(data => {
        setUsers(data)
      })
  }
  const storeData = async (value) => {    
  try {
    await AsyncStorage.setItem('searchText', value)
    getData()
  } catch (e) {
  }
}
const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('searchText')
    setText(value)
    if(value !== null) {
    }
  } catch(e) {
  }
}


    fetchData()
  const txtHandler = (enteredName) => {
    setText(enteredName);
  };

  const btnHandler = (icon) => {
    console.log(icon)

  }

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor:"black",color:"white"}}>
    <Text style={{position:"absolute", top:50, left:90,fontSize:20, color:'white'}}>Search</Text>
    <Ionicons name="location" color={'white'} size={26} style={{position:"absolute", top:50, left:490,fontSize:20}}/>
      <TextInput
        style={{
          backgroundColor:"white",
    height: 40,
    margin: 12,
    borderWidth: 1,
    borderBottomColor: '#ffffff',
    borderTopColor: '#ffffff',
    borderRightColor: '#ffffff',
    borderLeftColor: '#ffffff',
    padding: 10,
    borderColor: "#ffffff",
    width:"70%",
    position:"absolute",
    top:80,
    borderRadius:10
  }}
        placeholder="Search HUB Businesses..."
        onChangeText={txtHandler}
        defaultValue={text}
      ></TextInput>
      <View style={styles.scrollView}>
      <ScrollView style={styles.scrollView} horizontal={true}>

  <View style={styles.catView}>
  <Ionicons name="cafe" color={'white'} size={26} style={{marginLeft:0, marginTop:10}}/>
  <Text style={{color:"white"}}>Cafe</Text>
  </View>

  <View style={styles.catView}>
  <Ionicons name="pizza" color={'white'} size={26} style={{marginLeft:0, marginTop:10}} onPress={this.storeData.bind(this,'pizza')}/>
  <Text style={{color:"white"}}>Pizza</Text>
  </View>

  <View style={styles.catView}>
  <Ionicons name="paper-plane" color={'white'} size={26} style={{marginLeft:0, marginTop:10}} onPress={this.storeData.bind(this,'travel')}/>
  <Text style={{color:"white"}}>Travel</Text>
  </View>

  <View style={styles.catView} onPress={btnHandler}>
<FontAwesome name="tree" color={'white'} size={26} style={{marginLeft:0, marginTop:10}}  onPress={this.storeData.bind(this,'tree')}/>
  <Text style={{color:"white"}} >Tree</Text>
  </View>

`

Upvotes: 1

Views: 560

Answers (1)

nolan
nolan

Reputation: 64

You should not call functions in onPress, you should pass functions.

ex. change onPress={this.storeData.bind(this,'travel')}

to :

onPress={ () => storeData('travel')}

Upvotes: 2

Related Questions