How to tell typescript that I am waiting for an object with the required fields in jsx?

Question

typescript

My current code is
My type:

export interface IFilm {
    id : number;
    media_type : string;
    overview : string;
    poster_path : string;
    release_date : string;
    title : string;
    vote_average : number;
    vote_count : number;
}

A function that takes a type

export const Film = (film: IFilm): ReactElement => {
  return <div></div>;
};

Component
<Film film={film} />
Where film is

backdrop_path: "/8Y43POKjjKDGI9MH89NW0NAzzp8.jpg"
id: 550988
media_type: "movie"
original_language: "en"
original_title: "Free Guy"
overview: "У сотрудник..."
popularity: 2165.83
poster_path: "/qJZ3UeKAOgz2kFVJPZZFzLtn1Qk.jpg"
release_date: "2021-08-11"
title: "Главный герой"

Mistake

Type "{ film: IFilm; }" cannot be assigned to type "IntrinsicAttributes & IFilm".
Property 'film' does not exist on type 'IntrinsicAttributes & IFilm'

It's completely green in the typescript, I understand a stupid mistake, but still ...?

Answer 1

export const Film = ({ film }: { film: IFilm ): ReactElement => {
  return <div></div>;
};

And better:

export const Film: React.FC<{
  film: IFilm
}> = ({ 
  film 
}) => {
  return <div></div>;
};