title: Pass function between two child components in React
body: <p>I have a component called Navigation.js in which I have three components, Movies, MyPage and Search. I only need to communicate between Search and Movies component here.</p>
  <pre><code>&lt;Router&gt;
   &lt;nav&gt;
     &lt;li&gt;
      &lt;Link to='/'&gt;Movies&lt;/Link&gt;
      &lt;Link to='/mypage'&gt;My Page&lt;/Link&gt;
     &lt;/li&gt;
     &lt;Search/&gt; //Search Component
     
       &lt;Switch&gt;
         &lt;Route path=&quot;/mypage&quot;&gt;
           &lt;MyPage /&gt;
         &lt;/Route&gt;
         &lt;Route path=&quot;/&quot;&gt;
           &lt;Movies/&gt;
        &lt;/Route&gt;
       &lt;/Switch&gt;
  &lt;/Router&gt; 
  </code></pre>
  <p>In Search Component I Have simple search form.</p>
  <pre><code>export const Search = (props) =&gt; {
       const searchTxt = useRef('');
       const submitSearchHandler = (e) =&gt;{
           e.preventDefault();
           const val = searchTxt.current.value;
        }
       return (
          &lt;form onSubmit={submitSearchHandler}&gt;
          &lt;input ref={searchTxt} /&gt;
          &lt;button type=&quot;submit&quot;&gt;Search&lt;/button&gt;
        &lt;/form&gt;
       )
  }
  </code></pre>
  <p>In Movies component I have used Fetch to load movies from API. So What I am trying is whenever user clicks search inside search component I want execute fetchMovies Function inside Movies Component with search parameter from Search Component. Given Below</p>
  <pre><code>    const Movies = () =&gt; {
      const [movies, setmovies] = useState({data:[], loading:true})
      const fetchMovies = async (search='') =&gt; {
          setmovies({loading:true})
          const moviesResponse = await fetch('https://yts.mx/api/v2/list_movies.json? 
          query_term='+search);
          const data = await moviesResponse.json();
          const moviesdata = data.data;
          setmovies({data:moviesdata.movies,loading:false})
      };
      useEffect(() =&gt; {
          fetchMovies()
      },[])
      
      
     let content =  movies.data.map((movie) =&gt; {
              return &lt;Movie key={movie.id} movie={movie}/&gt;
               })
     return (
              &lt;div&gt;
                 {content}
              &lt;/div&gt;
         
         )
       }
      
  </code></pre>