title: Update state when imported variable changes using react hooks
body: <p>I have a searchbar component and a Catalog component. The Catalog component contains different cards. Depending on what is typed in the input field of the searchbar component I want to render different cards.</p>
  <p>For this to work I need to be able to import the value of the input field into the Catalog component where it is passed in a search function that handles all the rest of the work.</p>
  <p>I am able to import the value into my Catalog component but unfortunaty I can't figure out how I can tell if the imported value has changed so I can search again?</p>
  <p>I have found some ways to do this with classes but I would like to use hooks instead. I have experimented a bit with &quot;useEffect&quot; but that didn't work out.</p>
  <p>Thank you for your help!</p>
  <p>This is my code in the searchbar component:</p>
  <pre><code>import React, { useState } from 'react';
  
  let input = &quot;&quot;;
  
  function Search() {
    const [value, setValue] = useState(input);
  
    function onSearch(e) {
      setValue(e.target.value);
      input = value;
    }
  
    return(
      &lt;form className=&quot;searchForm&quot;&gt;
        &lt;input className=&quot;search&quot; type=&quot;text&quot; name=&quot;search&quot; autoComplete=&quot;off&quot; placeholder=&quot;zoeken&quot; value={value} onChange={onSearch}/&gt; &lt;/form&gt;
    );
  }
  
  
  export { Search, input };
  </code></pre>
  <p>And this is the code in my Catalog</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import {input} from &quot;./search&quot;;
  // other imports
  
  function Catalog(props){
    //get cards code and fuse code
     
    const [query, setQuery] = useState(input);
    
    function inputHasChanged(){ //function that can tell if the imported input variable changed
      setQuery(input); //update query and rerender cards
    }
  
    const results = fuse.search(query)
    const searchedCards = query ? results.map(card =&gt; card.item) : cards;
    
    //other code
  
   
    return(
      &lt;div&gt;
         //render the SearchedCards
      &lt;/div&gt;
    );
  }
  
  
  
  export {Catalog};
  </code></pre>
  <p><strong>Solution:</strong></p>
  <p>code in search:</p>
  <pre><code>import React, { useState } from 'react';
  
  
  const Search = ({ searching }) =&gt; {
    const [value, setValue] = useState(&quot;&quot;);
  
    function submit(e){
      setValue(e.target.value);
      searching(value);
    }
  
    return (
      &lt;form className=&quot;searchForm&quot;&gt;
        &lt;input
          className=&quot;search&quot;
          type=&quot;text&quot; name=&quot;search&quot;
          autoComplete=&quot;off&quot;
          placeholder=&quot;zoeken&quot;
          value={value}
          onChange={submit}
        /&gt;
      &lt;/form&gt;
    );
  };
  
  export { Search };
  </code></pre>
  <p>Search is a child of banner:</p>
  <pre><code>import React, {useState, useEffect} from 'react';
  import {Search} from './search';
  import Header from './Header';
  import Overzicht from './Overzicht';
  
  
  const Banner = ({ search }) =&gt; {
    const [value, setValue] = useState(&quot;&quot;);
  
    useEffect(() =&gt; {
      search(value);
    },[search, value]);
  
    return(
      &lt;div className=&quot;banner&quot;&gt;
        &lt;Header /&gt;
        &lt;Search searching={value =&gt; setValue(value)} /&gt;
        &lt;Overzicht /&gt;
      &lt;/div&gt;
    );
  };
  
  
  export default Banner;
  </code></pre>
  <p>Banner is a child of home which also contains Catalog:</p>
  <pre><code>import React,  { useState } from &quot;react&quot;;
  import Banner from './banner';
  import {Catalog} from './Catalog';
  
  function Home(){
    const [input, setInput] = useState(&quot;&quot;);
  
    return(
      &lt;div&gt;
        &lt;section id=&quot;banner&quot;&gt;
          &lt;Banner search={input =&gt; setInput(input)}/&gt;
        &lt;/section&gt;
        &lt;section id=&quot;overzicht&quot;&gt;
          &lt;Catalog search={input} /&gt;
        &lt;/section&gt;
      &lt;/div&gt;
    );
  }
  
  export default Home;
  </code></pre>
  <p>And now I can just call</p>
  <pre><code>props.search
  </code></pre>
  <p>In Catalog</p>