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