I am new to React and creating a Tic-Tac-Toe game. I want to create a starting page with three options :
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.
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>}
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>
);