Приветствую, я делаю свой квиз на тайпскрипте..
Вся логика происходит в компоненте , я импортирую файл js в котором находится обьект массивов, пример
{
title: "React - is ... ?",
variants: ["library", "framework", "application"]
correct: 0,
},
Далее пользователь нажимает на варианты ответа и когда приходит конец вопросам должен рендериться компонент (я его импортировал в компонент ) но почему-то он не отображается
Вот компонент Game:
import React from "react";
import { questions } from "../question.js";
import Result from "../components/Result";
const Game: React.FC = () => {
const [step, setStep] = React.useState<number>(0);
const question = questions[step];
const onClickVariant = (index: any): void => {
console.log(step, index);
setStep(step + 1);
};
const percentage = Math.round((step / questions.length) * 100);
console.log(percentage);
return (
<>
<div className="progress">
<div
style={{ width: `${percentage}%` }}
className="progress__inner"
></div>
</div>
<h1>{question.title}</h1>
<ul>
{question.variants.map((text, index) => (
<li key={text} onClick={() => onClickVariant(index)}>
{text}
</li>
))}
</ul>
{percentage === 100 && <Result />}
</>
);
};
export default Game;
Вопрос в том какие варианты рендера компонента Result, я пробовал:
{percentage === 100 && }
{step != questions.length ? console.log("Game") : }
Средний
