I'm a beginner at TypeScript and I'm trying to access my state object (from App.tsx
) within Questions.tsx
. So I want/need to access for example chosenAmount
in Questions.tsx
. The error I get is that the Property does not exist on type Object. I can, however, successfully console.log the gameSettings
object, which tells me I passed it down successfully?
Sorry if my question is not clear, I'll happily provide more information!!!
Here's part of my App.tsx
.
export const App: React.FC = () => {
const [hasStarted, setHasStarted] = useState<Boolean>(false);
const [gameSettings, setGameSettings] = useState<Object>({
chosenAmount: "",
chosenCategory: "",
chosenDifficulty: "",
});
return (
<>
{hasStarted ? (
<Questions gameSettings={gameSettings} />
) : (
<Start
handleHasStarted={handleHasStarted}
handleChosenAmount={handleChosenAmount}
handleChosenCategory={handleChosenCategory}
handleChosenDifficulty={handleChosenDifficulty}
/>
)}
</>
);
};
CodePudding user response:
I guess you are referring Typescript
error. If you change your code in this way, it should dissapear
interface GameStates {
chosenAmount: string,
chosenCategory: string,
chosenDifficulty: string
}
export const App: React.FC = () => {
const [hasStarted, setHasStarted] = useState<Boolean>(false);
const [gameSettings, setGameSettings] = useState<GameStates>({
chosenAmount: "",
chosenCategory: "",
chosenDifficulty: "",
});
return (
<>
{hasStarted ? (
<Questions gameSettings={gameSettings} />
) : (
<Start
handleHasStarted={handleHasStarted}
handleChosenAmount={handleChosenAmount}
handleChosenCategory={handleChosenCategory}
handleChosenDifficulty={handleChosenDifficulty}
/>
)}
</>
);
};