remove code duplication
make a function returning a compoment
This commit is contained in:
parent
ad6c4d44e8
commit
9e0d569eaf
22
src/App.js
22
src/App.js
@ -1,22 +1,26 @@
|
|||||||
import './App.css';
|
import './App.css';
|
||||||
|
|
||||||
|
function Square({ value }) {
|
||||||
|
return <button className="square">{value}</button>;
|
||||||
|
}
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="board-row">
|
<div className="board-row">
|
||||||
<button className="square">1</button>
|
<Square value="1"/>
|
||||||
<button className="square">2</button>
|
<Square value="2"/>
|
||||||
<button className="square">3</button>
|
<Square value="3"/>
|
||||||
</div>
|
</div>
|
||||||
<div className="board-row">
|
<div className="board-row">
|
||||||
<button className="square">4</button>
|
<Square value="4"/>
|
||||||
<button className="square">5</button>
|
<Square value="5"/>
|
||||||
<button className="square">6</button>
|
<Square value="6"/>
|
||||||
</div>
|
</div>
|
||||||
<div className="board-row">
|
<div className="board-row">
|
||||||
<button className="square">7</button>
|
<Square value="7"/>
|
||||||
<button className="square">8</button>
|
<Square value="8"/>
|
||||||
<button className="square">9</button>
|
<Square value="9"/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user