title: React Native - searchApi is not a function
body: <p>I am new in React Native. I try to create a simple searching food restaurant with Yelp. Unfortunately, I get an error:</p>
  <blockquote>
  <p>&quot;searchApi is not a function. (in 'searchApi(term)', 'searchApi' is
  &quot;&quot;)</p>
  </blockquote>
  <p>Below my code.</p>
  <p><strong>useResults.js</strong></p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import yelp from '../api/yelp';
  
  export default () =&gt; {
      const [result, setResult] = useState([]);
      const [errorMessage, setErrorMessage] = useState('');
  
      const searchApi = async (searchTerm) =&gt; {        
          console.log(&quot;hi there&quot;);
          try {
              const response = await yelp.get('/search', {
                  params: {
                      limit: 50,
                      term: searchTerm,
                      location: 'san jose'
  
                  }
              });
              setErrorMessage(null);
              setResult(response.data.businesses);
          } catch (err) {
              setErrorMessage('Something Went Wrong');
          }
      };
      
      /*
      useEffect(() =&gt; {}); //Run the arrow function everytime the component is rendered    
      useEffect(() =&gt; {}, []); // Run the arrow function only when the component is first rendered
      useEffect(() =&gt; {}, [value]); // Run the arrow function only when the component is first rendered, and when the value is changes
      */
  
      useEffect(() =&gt; {
          searchApi('pasta');        
      }, []);
      
      return [searchApi, result, errorMessage];
  };
  </code></pre>
  <p><strong>SearchScreen.js</strong></p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  import ResultList from '../components/ResultList';
  import SearchBar from '../components/SearchBar';
  import useResults from '../hooks/useResults';
  
  
  const SearchScreen = () =&gt; {
      const [term, setTerm] = useState('');
      const [searchApi, result, errorMessage] = useResults();
      console.log(result);
      
      return (
          &lt;View&gt;
              &lt;SearchBar 
                  term={term} 
                  onTermChange={setTerm} 
                  onTermSubmit={() =&gt; searchApi(term)}
              /&gt;            
              &lt;View&gt;{errorMessage ? &lt;Text&gt;{errorMessage}&lt;/Text&gt; : null}&lt;/View&gt;
              &lt;Text&gt;We have found {result.length} results&lt;/Text&gt;      
              &lt;ResultList title=&quot;Cost Effective&quot; /&gt;
              &lt;ResultList title=&quot;Bit Pricier&quot; /&gt;            
              &lt;ResultList title=&quot;Big Spender&quot;/&gt;
          &lt;/View&gt;
      );
  };
  
  const styles = StyleSheet.create({
      
  });
  
  export default SearchScreen;
  </code></pre>
  <p>edit :
  <strong>SearchBar.js</strong></p>
  <pre><code>import React from 'react';
  import { View, Text, StyleSheet, TextInput } from 'react-native';
  import { Feather } from '@expo/vector-icons';
  
  
  const SearchBar = ({ term, onTermChange, onTermSubmit }) =&gt; {
      return (
          &lt;View style={styles.backgroundStyle}&gt;
              &lt;Feather style={styles.iconStyle} name=&quot;search&quot; size={30} color=&quot;black&quot; /&gt;
              &lt;TextInput style={styles.inputStyle} 
                  autoCapitalize=&quot;none&quot;
                  autoCorrect={false}
                  placeholder=&quot;Search&quot; 
                  value={term}
                  onChangeText={onTermChange}
                  onEndEditing={onTermSubmit}
              /&gt;
  
          &lt;/View&gt;
      )
  };
  
  const styles = StyleSheet.create({
      backgroundStyle: {
          marginTop: 10,
          backgroundColor: '#F0EEEE',
          height: 50,
          borderRadius: 5,
          marginHorizontal: 15,
          flexDirection: 'row'
          
      },
      inputStyle: {        
          flex: 1,
          fontSize: 18,
          marginHorizontal: 10
      },
      iconStyle: {
          fontSize: 35,
          alignSelf: 'center'
      }
  });
  
  
  export default SearchBar;
  </code></pre>
  <p>When I type in search bar and hit done button, I got the error above.</p>
  <p>Seems in <code>useResults.js</code> file this: <code>return [searchApi, result, errorMessage];</code> does not properly return the function. But the result and errorMessage return successfully.</p>
  <p>And in this file: <code>SearchScreen.js</code> the error line is shown in here:  <code>onTermSubmit={() =&gt; searchApi(term)}</code>.</p>
  <p>How to fix this?</p>