JSFiddle - React, Tailwind, and code Playground

by treekey

HTML

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

Babel + JSX

class MyBtn extends React.Component {

	constructor(props){
	  super(props)
  	this.state = {
    	count: 0,
    }
	}
  
  componentDidUpdate(){
    throw "Some Bugs Here!"
  }
  
  onClick = (e) => {
    e.preventDefault()
  	this.setState(
      { count: this.state.count + 1 },
      () => (console.log(this.state))
    )
  }
  
  render(){
  	return (
  		<button
        onClick={this.onClick}
      >{ this.props.children }</button>
    )
  }
}

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true })
    console.log('>>> error:', error)
    console.log('>>> info:', info)
    // You can also log the error to an error reporting service
    // logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

const App = () => (
  <div>
    <ErrorBoundary>
      <MyBtn>Click Me with Error Boundary</MyBtn>
    </ErrorBoundary>
    <br />
    <MyBtn>Click Me</MyBtn>
  </div>
)
ReactDOM.render( <App /> , document.getElementById('app'));