So I started learning typescript and I can't figure out how to pass props.
I have a movie search, so I have a next component chain:
App -> Hero(a huge div which displays everything) -> Container(a container which contains divs with movies in each one) -> MovieItem(a div which contains all info about the movie, which we get from the json data).

I made the next interface:

```
export interface IMovie{
    rate: string;
    title: string,
    tagline: string;
    date: string;
}

```

Edit: I edited the code from the answers and that's what it looks like now:

App component:

```
    const App = () => {

  const [movies, setMovies] = useState<MovieProps[]>([]);

  useEffect(() =>{
      fetchMovies();
  }, [])

  async function fetchMovies() {
      try{
        let apikey = '0ce1e51fc4f5b92e2f8984a6aa026503';
        let url: string = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=';
        url = url + apikey;
        const response = await axios.get<MovieProps[]>(url);
        setMovies(response.data);
        console.log(response.data);

      }catch(e){
        alert(e)
      }
  }

  return (
    <div className="App">
      <Header/>
      <Hero movies={movies}/>
    </div>
  );
}

export default App;

```

Hero component:

```
const Hero = ({movies}: MovieProps) => {
  return (
    <div className="hero">
        <h1>trending today</h1>
        <Container movies={movies}/>
    </div>
  );
};

export default Hero;

```

Container component:

```
const Container = ({movies}: MovieProps) => {
  return (
    <div className="container">
        <MovieItem movies={movies}/>
    </div>
  );
};

export default Container;

```

I passed props all the way through to MovieItem, but here's the problem, in App.tsx component I can't pass the array, because when I try to pass to the Hero component in the following way: `<Hero movies={movies}/>`,
I get the next error:

```
Type 'MovieProps[]' is not assignable to type 'MovieType[]'.
  Type 'MovieProps' is missing the following properties from type 'MovieType': rate, title, tagline, date

```

I created an `index.d.ts` file to store all the interfaces, it looks like this:

```
declare module 'myMovies' {
    type MovieType = {
        rate: string,
        title: string,
        tagline: string,
        date: string,
    };

    interface MovieProps {
        movies: MovieType[],
      }
    }

    module.exports = {
        MovieType,
        MovieProps
    };

```

So I'm not sure what could be the problem, I declared a default array in `useState()` and tried to pass to the Hero component.