Refactor large component into smaller ones

by jonahe

HTML

<div id="app"></div>

CSS

body {
  color: black;
}

.main-component {
  margin: 20px;
}

.my-button {
  background-color: none;
  display: block;
  width: 100%;
  color: black;
  margin: 5px;
  border: 1px solid grey;
  border-radius: 5px;
  padding: 5px;
}

.my-button.blue {
  background-color: blue;
  color: white;
}

.my-button.red {
  background-color: red;
  color: white;
}

.my-button.yellow {
  background-color: yellow;
}

.my-button.green {
  background-color: green;
  color: white;
}

React

/** 
  Uppgift:
  	Koden för att rendera knapparna 
    dupliceras i onödan.
  	Bryt ut knappen till en egen
    komponent som genom att få
    olika props kan visa rätt knapp-text,
    rätt färg och rätt alert-text
    
   Extrapoäng: 
   Hur många props skulle en egen
   knappkomponent behöva ha? Det är ju flera saker
   (knapptext, klassnamn, argument till alert-funktionen)
   som ska kunna ändras..
   Men när man duplicerar koden, t.ex. för att 
   göra en fjärde knapp som blir grön, så 
   räcker det att byta ut 
   ett enda namn ("red" / "blue" / "yellow")
   på flera ställen. Betyder det att
   den nya knapp-komponenten skulle kunna klara
   sig med en enda prop också?
*/
const App = () => {
	return (<div className="main-component">
    <h2>These are my buttons:</h2>
    
    <button 
      className="my-button blue"
      onClick={ () => alert("blue") }
    >
	    blue button alerts "blue"
	  </button>
    
    <button 
      className="my-button red"
      onClick={ () => alert("red") }
    >
	    red button alerts "red"
	  </button>
    
    <button 
      className="my-button yellow"
      onClick={ () => alert("yellow") }
    >
	    yellow button alerts "yellow"
	  </button>
    
	</div>);
}


ReactDOM.render(<App />, document.querySelector("#app"))