How can I render different component using onClick() function in React?

I am new to React and creating a Tic-Tac-Toe game. I want to create a starting page with three options :

  1. Start
  2. Rules
  3. Exit

On clicking the start button I want to render the component which consists of the original game. On clicking rules I want to render a page showing rules. I have created seperate components for the three buttons and also the game itself.

Screenshot-Start Page

Screenshot-Main Game

My Tic-Tac-Toe Repo

Answer

To redirect to a new page containing one of your component you can use react router : https://v5.reactrouter.com/web/guides/quick-start

and use your button as a Link or use the useHistory hook in your onClick function

If you just want to render a component on the current page when you click on a button you can simply use a condition with a state like so :

...
const [isStart, setIsStart] = useState(false)

...
{isStart ? <Start> : <Button onClick={() => setIsStart(true)}>Start</Button>}