Can't access state object in child component with React/TypeScript

Question

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}
        />
      )}
    </>
  );
};

Answer 1

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}
        />
      )}
    </>
  );
};