Как типизировать props массива объектов?

Question

[barbosk]

Получаю по апи массив объектов и передаю их в data.
Получаю data в компоненте Catalog, но как только указываю ему тип пропса, начинает ругаться "Свойство movies не существует в типе IData". Понятно, что как-то указал коряво тип, но не пойму как надо.

App

import React from "react";
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from "@ant-design/icons";
import { Layout, Menu, theme } from "antd";
import { Search } from "./components/Search";
import { Catalog } from "./components/Catalog";
import { IData } from "./types/data";

const { Header, Content, Footer, Sider } = Layout;

const App: React.FC = () => {
  const [data, setData] = React.useState<IData[]>([]);

  React.useEffect(() => {
    fetch("https://kinopoiskapiunofficial.tech/api/v2.2/films", {
      method: "GET",
      headers: {
        "X-API-KEY": "**********************",
        "Content-Type": "application/json",
      },
    })
      .then((res) => res.json())
      .then((data) => {
        setData(data.items);
      })
      .catch((err) => console.log(err));
  }, []);

  const {
    token: { colorBgContainer },
  } = theme.useToken();

  return (
    <Layout>
      <Catalog movies={data} />
    </Layout>
  );
};

export default App;

Type

export interface IData {
  countries?: { country: string }[];
  genres?: { genre: string }[];
  imdbId?: string;
  kinopoiskId?: number;
  nameEn?: null;
  nameOriginal?: string;
  nameRu: string;
  posterUrl?: string;
  posterUrlPreview?: string;
  ratingImdb?: number;
  ratingKinopoisk?: number;
  type?: string;
  year?: number;
}

Catalog

import React from "react";
import { IData } from "../../types/data";

const Catalog: React.FC<IData[]> = ({ movies }) => {
  return (
    <>
      {movies.map((item: any) => (
        <div>{item.nameRu} </div>
      ))}
    </>
  );
};

export { Catalog };

Comments

[Модератор]

Нарушение п.3.8 Регламента. Скриншоты фрагментов кода запрещены. Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

Answer 1

[Денис Соколов]

React.FC<{ movies: IData[] }>

Comments

[barbosk]

Спасибо , помогло!