title: SetState Not Updating to fetch dynmically
body: <p>I am learning react and I am trying to use a text input in a dynamic fetch request</p>
  <p>My component is defined as ...</p>
  <pre><code>export default testpage = () =&gt; {
      const [state, setState] = React.useState({})
      let handleChange = (event) =&gt; {
              setState({input: event.target.value})
            }
      async function buttonClick (input) {
      console.log(state.input)
        await fetch(`http://localhost:8080/api/${input}`)
        .then(response =&gt; response.json())
          .then(data =&gt; setState({...state, data}))
   
  render(
        &lt;input type={'text'} onChange={handleChange.bind(this)} /&gt;
        &lt;Button onClick={() =&gt; buttonClick(state.input)}&gt;test&lt;/Button&gt;
        )
     }
  </code></pre>
  <p>My problem relates to useState updating asynchronously. If I enter a number ie. 4 into the input box and then click the button. The first time I click the button the fetch fails because undefined is passed to the fetch statement because the state hasn't been updated. If I click the button a second time the fetch succeeds. I have read into the useEffect hook but I am unable to figure out how to apply it to my situation.</p>