Exemplo de uma simples aplicação de busca de filmes com props drilling

gistfile1.txt

// /src/pages/Home.js
import { useState } from 'react';

import * as C from '../components';

export const Home = () => {
const [movie, setMovie = useState();

  return (
    <main>
      <C.SearchBar setMovie={setMovie}/>
      <C.ShowFilm movie={movie} />
    </main>
  );
};

// /src/components/index.js
import { useState } from 'react';

export const SearchBar = ({ setMovie }) => {
  const [allMovies, setAllMovies] = useState([]);
  //lógica de requisição conforme valor do input

  return (
    <>
      <input />
      {allMovies && moviesData.map((movie) => 
	return <FilmResult setMovie={setMovie} 
                      movie={movie} 
                      key={film.name} />
	);
      }	      
    </>
  );
};


export const FilmResult = ({ movie, setMovie }) => {
  return (
    <div onClick={() => setMovie(movie)}>
      <img src={movie.src} />
      <p>{movie.title}</p>
    </div>
  );
};


export const ShowFilm = ({ movie }) => {
  if (!movie) return null
  return (
    <div>
      <h2>{movie.title}</h2>
      <img src={movie.src}
      <p>{movie.description}</p>
      <h3>Actors</h3>
      {movie.actors.map((actor) => <p key={actor}>{actor}</p>)}
    </div>
  );
};