1

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

2 Answers 2

0

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>}
Sign up to request clarification or add additional context in comments.

3 Comments

Thank you for clearing my query. This seems to work but what I want is that whenever I click the start button I want the start button to disappear and the required component be rendered on the screen.
Alright I made some edits, tell me if it suits you
Thank you.. I used if-else and got it to work..
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.