2023-07-31 13:16:42 +02:00
|
|
|
import './App.css';
|
2023-07-31 14:28:09 +02:00
|
|
|
import { useState } from 'react';
|
|
|
|
|
|
|
|
function Square() {
|
|
|
|
const [value, setValue] = useState(null);
|
2023-07-31 13:16:42 +02:00
|
|
|
|
2023-07-31 14:05:46 +02:00
|
|
|
function handleClick() {
|
2023-07-31 14:28:09 +02:00
|
|
|
setValue('X')
|
2023-07-31 14:05:46 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<button
|
|
|
|
className="square"
|
|
|
|
onClick={handleClick}
|
|
|
|
>
|
|
|
|
{value}
|
|
|
|
</button>
|
|
|
|
);
|
2023-07-31 13:58:07 +02:00
|
|
|
}
|
|
|
|
|
2023-07-31 13:16:42 +02:00
|
|
|
function App() {
|
|
|
|
return (
|
2023-07-31 13:35:46 +02:00
|
|
|
<>
|
2023-07-31 13:44:31 +02:00
|
|
|
<div className="board-row">
|
2023-07-31 14:28:09 +02:00
|
|
|
<Square />
|
|
|
|
<Square />
|
|
|
|
<Square />
|
2023-07-31 13:44:31 +02:00
|
|
|
</div>
|
|
|
|
<div className="board-row">
|
2023-07-31 14:28:09 +02:00
|
|
|
<Square />
|
|
|
|
<Square />
|
|
|
|
<Square />
|
2023-07-31 13:44:31 +02:00
|
|
|
</div>
|
|
|
|
<div className="board-row">
|
2023-07-31 14:28:09 +02:00
|
|
|
<Square />
|
|
|
|
<Square />
|
|
|
|
<Square />
|
2023-07-31 13:44:31 +02:00
|
|
|
</div>
|
2023-07-31 13:35:46 +02:00
|
|
|
</>
|
2023-07-31 13:16:42 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default App;
|