I try to build Tictactoe game with different size and i create a game menu to choose which board are gonna play. But i got struggle with how to redirect or navigate the start button after choosing the board size using radio form. I only build two board size just to test. Here's my code
Menu.js:
import React, { Component,useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Game from './Game'
import Game2 from './Game2'
export default function Menu() {
const [radio, setRadio] = useState();
// let navigate = useNavigate();
return (
<div>
<div className='title'>
<h1>Tic Tac Toe</h1>
</div>
<div className='board-options'>
<div>Choose Board Size: {radio}</div>
<div className="size-options">
<form>
<label>
<input type="radio"
name='size'
checked={radio === '3x3'}
value='3x3'
onChange={(e) => {setRadio(e.target.value)}} />
<img src="./images/grid-3.png" alt="grid-3" />
</label>
<label>
<input type="radio"
name='size'
checked={radio === '4x4'}
value='4x4'
onChange={(e) => {setRadio(e.target.value)}} />
<img src="./images/grid-4.png" alt="grid-4" />
</label>
<label>
<input type="radio"
name='size'
checked={radio === '5x5'}
value='5x5'
onChange={(e) => {setRadio(e.target.value)}} />
<img src="./images/grid-5.png" alt="grid-5" />
</label>
<label>
<input type="radio"
name='size'
checked={radio === '6x6'}
value='6x6'
onChange={(e) => {setRadio(e.target.value)}} />
<img src="./images/grid-6.png" alt="grid-6" />
</label>
</form>
<button type='submit' id='start'>START</button>
</div>
</div>
</div>
)
}
I tried to use useNavigate from react-router-dom but it caused the Menu function didn't rendered. I expected to use the START button to navigate to the game files that i choose.
You should move the button inside the form and the you can navigate when the onSubmit event is triggered. Here is a small example using the code you provided.
import "./styles.css";
import { useState } from "react";
export default function App() {
const [radio, setRadio] = useState();
// let navigate = useNavigate();
const _onSubmit = (e) => {
e.preventDefault();
console.log("On submit navigate...");
};
return (
<div>
<div className="title">
<h1>Tic Tac Toe</h1>
</div>
<div className="board-options">
<div>Choose Board Size: {radio}</div>
<div className="size-options">
<form onSubmit={_onSubmit}>
<label>
<input
type="radio"
name="size"
checked={radio === "3x3"}
value="3x3"
onChange={(e) => {
setRadio(e.target.value);
}}
/>
<img src="./images/grid-3.png" alt="grid-3" />
</label>
<label>
<input
type="radio"
name="size"
checked={radio === "4x4"}
value="4x4"
onChange={(e) => {
setRadio(e.target.value);
}}
/>
<img src="./images/grid-4.png" alt="grid-4" />
</label>
<label>
<input
type="radio"
name="size"
checked={radio === "5x5"}
value="5x5"
onChange={(e) => {
setRadio(e.target.value);
}}
/>
<img src="./images/grid-5.png" alt="grid-5" />
</label>
<label>
<input
type="radio"
name="size"
checked={radio === "6x6"}
value="6x6"
onChange={(e) => {
setRadio(e.target.value);
}}
/>
<img src="./images/grid-6.png" alt="grid-6" />
</label>
<button type="submit" id="start">
START
</button>
</form>
</div>
</div>
</div>
);
}