Как типизировать пропс?

Question

Как мне типизировать пропс в компоненте Game, выдает ошибку: "Type '{ question: { title: string; variants: string[]; correct: number; }; }' is not assignable to type 'IntrinsicAttributes'. Property 'question' does not exist on type 'IntrinsicAttributes'"

import React from "react";
import "./index.scss";
import { questions } from "./question";

function Result() {
  return (
    <div className="result">
      <img src="https://cdn-icons-png.flaticon.com/512/2278/2278992.png" />
      <h2>Вы отгадали 3 ответа из 10</h2>
      <button>Попробовать снова</button>
    </div>
  );
}

function Game() {
  return (
    <>
      <div className="progress">
        <div style={{ width: "50%" }} className="progress__inner"></div>
      </div>
      <h1>Что такое useState?</h1>
      <ul>
        <li>Это функция для хранения данных компонента</li>
        <li>Это глобальный стейт</li>
        <li>Это когда на ты никому не нужен</li>
      </ul>
    </>
  );
}

const App: React.FC = () => {
  const [step, setStep] = React.useState<number>(0);
  const question = questions[step];
  return (
    <div className="App">
      <Game question={question} />
    </div>
  );
};

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

В файле question.js находится :

export const questions = [
  {
    title: "React - is ... ?",
    variants: ["library", "framework", "application"],
    correct: 0,
  },
  {
    title: "Component - is ... ",
    variants: [
      "application",
      "Part of an application or page",
      "something, that I don't know",
    ],
    correct: 1,
  },
  {
    title: "What does JSX mean?",
    variants: [
      "It's simple HTML",
      "It's a function",
      "It's the same HTMl, but with opportunity to run JS code",
    ],
    correct: 2,
  },
  {
    title: "What does Python mean?",
    variants: [
      "It's simple HTML",
      "It's a function",
      "It's the same HTMl, but with opportunity to run JS code",
    ],
    correct: 2,
  },
  {
    title: "What does JSX mean?",
    variants: [
      "It's simple HTML",
      "It's a function",
      "It's the same HTMl, but with opportunity to run JS code",
    ],
    correct: 2,
  },
];

P.s Сижу уже долго и перепробовал достаточно и никак не выходит исправить проблему с типизацией пропса

БЛОГ НА HUSL

Как типизировать пропс?

Ответы (0 шт):