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

Question

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 1

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)
...
<Button onClick={() => setIsStart(true)}>Start</Button>
...
{isStart ? <Start> : null </Start>}

Answer 2

You have to use a React Router which is responsible for showing different components on different url paths, eg.:

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import LandingPage from './landing-page/LandingPage';
import Details from './details/Details';

const Router = () => {

    return (
        <React.Fragment>
            <Switch>
                <Route path={`/`} exact render={() => <LandingPage />} />
                <Route path={`/details`} exact render={() => <Details />} />
            </Switch>
        </React.Fragment>
    );
};

export default Router;

and then just redirects to those paths on click:

handleClick = (e) => {
    e.preventDefault();
    history.push('/results');
}

return (
<Button onClick={handleClick}>Results</Button>
);