title: Update a component with onChange. React-Hooks
body: <p>I'm building a dropdown with suggestions that fetch data from an API. The input from the search bar is being stored using setState and it is updated when i change the value in the text input.</p>
  
  <p>The thing is that I'm not managing to update the users lists from the dropdown each time I enter a new character in the text input. Can I somehow force the component to be rendered every time the props change? Or is there a better approach?</p>
  
  <pre><code>import React, {useState, useEffect} from 'react';
  import Dropdown from '../Dropdown/Dropdown';
  import './SearchBar.css';
  
  
  // Component created with arrow function making use of hooks
  const SearchBar = (props) =&gt; {
  
      const [input, setInput] = useState('');
      const [dropdownComponent, updateDropdown] = useState(&lt;Dropdown input={input}/&gt;)
  
      useEffect(() =&gt; {updateDropdown(&lt;Dropdown input={input}/&gt;)}, [input])
  
      const onChange = (e) =&gt; {
          setInput(e.currentTarget.value)
          updateDropdown(&lt;Dropdown input={input}/&gt;)
          console.log("=(")
      }
  
  
  
      return(
          &lt;div className="search-bar"&gt;
              &lt;input type="text" placeholder={props.placeholder} onChange={onChange}/&gt;
              {dropdownComponent}
          &lt;/div&gt;
  
      )
  }
  
  export default SearchBar;
  </code></pre>