React gdsfp

by rjacks24

HTML

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

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
  background: black;
}

button {
  background: blue;
  width: 5rem;
  height:5rem;
  color:white;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stopped: this.props.stopped || false,
    };
    
		this.wasToggled = false;
    this.toggleStop = this.toggleStop.bind(this);
  }
 		

  /**
  */
   static getDerivedStateFromProps(nextProps, prevState) {
		console.log('prevState' , prevState, 'nextProps', nextProps);
    if (prevState.stopped !== nextProps.stopped) {
      return ({ stopped: nextProps.stopped });
    } 
    return null;
  }  

  /**
   * function to handle the stop of the antenna
   * @returns {void}
   */
  toggleStop() {
  	this.wasToggled  = !this.wasToggled;
    this.setState({
      stopped: !this.state.stopped,
    });
  }
  
  render() {
    return (
      <div>
          <button type="button" onClick={this.toggleStop} className={this.state.stopped ? "done" : ""} >Toggle</button>
           State Toggled? {this.state.stopped ? 'yes' : 'no'}
           <div>But Actually... wasToggled: {this.wasToggled ? 'yes' :'no'} </div>
      </div>
    )
  }
}

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