React

by Niranjan Borawake

HTML

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

CSS

.house {
  background-color: #bee5e1;
  border-style: double;
  border-width: 15px;
  padding: 20px;
  position: relative;
}

.house label {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background-color: black;
  color: white;
}

.house button {
  margin-right: 10px;
}

.house .parents-action {
  color: blue;
  margin: 20px 0;
}

.child {
  border: 1px solid red;
}

React

function House () {
	
  const [parentAction, setParentAction] = React.useState('doing nothing');
  
  return (
  	<section className="house">
      <label>House</label>
      <h1>Parents</h1>
      <div>
        <button onClick={() => setParentAction('eating')}>Eat</button>
        <button onClick={() => setParentAction('working')}>Work</button>
        <button onClick={() => setParentAction('watching TV')}>Watch TV</button>
        <button onClick={() => setParentAction('sleeping')}>Sleep</button>
      </div>      
      <div className="parents-action">Parents are {parentAction}.</div>
    </section>
  );
}


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