title: Why is my state not reflecting immediate in react?
body: <p>I know I'm missing something just can't figure out what it is.
  I have the following component:</p>
  
  <pre><code>const SearchComponent = (props) =&gt; {
    const [searchValue, setSearchValue] = useState('');
  
    const searchInputHandler = e =&gt; {
      const inputValue = e.target.value;
      setSearchValue(inputValue);
      console.log(searchValue);
      // filterData(searchValue, props)
    }
  
    return (
      &lt;&gt;
      &lt;Col className="col-sm-6" style={styles.flex}&gt;
        &lt;InputGroup&gt;
          &lt;Input
            placeholder="Search"
            onChange={e =&gt; searchInputHandler(e)}
            value={searchValue}
            /&gt;
          &lt;InputGroupAddon addonType="append"&gt;
            &lt;Button style={styles.inputButton} color="info"&gt;Clear&lt;/Button&gt;
          &lt;/InputGroupAddon&gt;
        &lt;/InputGroup&gt;
      &lt;/Col&gt;
      &lt;/&gt;
    )
  };
  </code></pre>
  
  <p>in the above component the initial value of my Input is ' '.  When I type any letter let's say a "t".</p>
  
  <p>I would expect that searchValue would = "t" since I am running setSearchValue(inputValue) in my method.  However when I type in "t" the state stays the same.  Only after I type it the second time then it would show ' t'.  What am I missing here?</p>