Note- component lifecycles

Starting point for creating JSFiddles with React.

by nishant1391

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app">

</div>

Babel + JSX

class Note extends React.Component {
	confirmLeave(e) {
  	let confirmationMessage = 'Do you really want to close?'
    e.returnValue = confirmationMessage
    return confirmationMessage
  }
  componentWillMount() {
    	console.log('Something before component will mount')
  }
  componentDidMount() {
  	console.log('Attaching confirmLeave event listerner for beforeunload')
    window.addEventListener('beforeunload', this.confirmLeave)
  }
  componentWillUnmount() {
  	console.log('Removing confirmLeave event listener for beforeunload')
    window.removeEventListener('beforeunload', this.confirmLeave)
  }
  render(){
  	console.log('Render')
    return <div>Here will be our input field for notes (parent will remove in {this.props.secondsLeft} seconds)</div>
  }
}

let secondsLeft = 5

let interval = setInterval(()=>{
  if (secondsLeft == 0) {
    ReactDOM.render(
      <div>
        Note was removed after {secondsLeft} seconds.
      </div>,
      document.getElementById('app')
    )
    clearInterval(interval)
  } else {
    ReactDOM.render(
        <Note secondsLeft={secondsLeft}/>
,
      document.getElementById('app')
    )
  }
  secondsLeft--
}, 1000)