title: Re-Usable fetch function with query string
body: <p>I have a fetch function inside of my react component, which I wish to &quot;outsourse&quot; in a separate component.</p>
  <pre><code>export const fetchBooksBySubject = (selectedValue) =&gt; {
  const options = {
    method: `GET`,
  };
  fetch(`${server}/books?subjects_like=${selectedValue}`, options)
  .then((response) =&gt; {
    if(response.ok){
      return response.json()
    }
      throw new Error('Api is not available') 
    })
  .catch(error =&gt; {
        console.error('Error fetching data: ', error)
   })
  }
  </code></pre>
  <p>Basically selectedValue is a prop coming from a child of App.jsx. As soon as the value is selected in a component, fetch should fire with this value in a query string. I tried to export the function above as a component and use it in App.jsx</p>
  <pre><code>  useEffect(() =&gt; {
      fetchBooksBySubject(selectedValue).then(data =&gt; setBookList(data));
    }, [selectedValue])
  
    const handleChange = e =&gt; {
      setSelectedValue(e);
      fetchBooksBySubject(selectedValue);
    };
  </code></pre>
  <p>But this throws Property 'then' does not exist on type 'void'.</p>