Исправить ошибку типирования TS?

Question

[Capablanca]

Развернул create-react-app с TS

Есть проп book, который падает в компоненты через типирование book= BookParamsTypes[];
Больше никаких пропов не передаю и не использую.

export type BookParamsTypes = {
  title: string;
  pubDate?: number;
};

в App.tsx делаю вызов компонента, передаю ему мок book={МОК} - то есть массив объектов.
Это принимает элемент и должен использовать внутри себя. Но уже ошибка.

"JSX element type '{ book: BookParamsTypes[]; (Missing): any; }' is not a constructor function for JSX elements.
  Type '{ book: BookParamsTypes[]; (Missing): any; }' is missing the following properties from type 'Element': type, props, keyts(2605)"

(Missing): any ? - что ему нужно

Принимающий элемент внутри должен через map для каждого объекта в массиве вывести див.
Например

{book.map((item: any, i: number) => (
    <Container key={i}>
      <BookTitle>{item.title}</BookTitle>
       // и так далее
      }
    </Container>
  ))}

Здесь он мне предлагает вместо точки перед map поставить запятую и все...

Видимо основная проблема в тексте ошбики выше, не могу справится с этой подсказкой..
Помогите, пожалуйста!

Comments

[Антон Спирин]

Добавьте весь код компонента, который в передаете book. Вместе с типами.

[Capablanca]

Антон Спирин,

BookTracker вызывается в App.tsx с book={МОЙ_МОК],
далее

import { BookParamsTypes } from "./types/BookParamsTypes";

type BookTrackerProps = {
  book: BookParamsTypes[];
};

const BookTracker = ({ book }: BookTrackerProps) => (
  <Container>
//...
        <BookDetailed book={book}/>
//...
  </Container>
);

export { BookTracker };

внутри BookDetailed вызывается map на переданном моке

[Антон Спирин]

Capablanca, еще BookDetailed, tsConfig.json и версию TypeScript

[Capablanca]

Антон Спирин, Спасибо вам! T_T

BookDetailed

import { BookParamsTypes } from "../types/BookParamsTypes";

type BookDetailedProps = {
  book: BookParamsTypes[];
};

const BookDetailed = ({ book }: BookDetailedProps) => (
  {book.map((item, i: number) => (
    <Container key={i}>
      <BookTitle>{item.title}</BookTitle>
      // ...
    </Container>
  ))}
);
export { BookDetailed };

tsConfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "jsx": "preserve",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "types": [],
    "isolatedModules": true
  },
  "include": [
    "src/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "**/*.spec.ts",
    "src/sw-*.js",
    "src/idb.js"
  ]
}

package.json:

"dependencies": {
    "@types/jest": "24.0.11",
    "@types/node": "11.13.6",
    "@types/react": "16.8.14",
    "@types/react-dom": "16.8.4",
    "@types/styled-components": "^4.1.14",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8",
    "styled-components": "^4.2.0",
    "typescript": "3.4.4"
  }
"devDependencies": {
    "babel-plugin-styled-components": "^1.10.0",
    "stylelint": "^10.0.1",
    "tslint": "^5.16.0",
    "tslint-config-airbnb": "^5.11.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^4.0.0"
  }