JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<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="container"></div>

Babel + JSX

class Parent extends React.Component {  
  constructor(props){
    super(props);
    this.state={hasError:false}
  }
 
  render() {
  	if(this.state.hasError){
    	return <div>Something went wrong</div>
    }
    
  	return (
    	<div>
    	  <h1>I am parent</h1>
        <Child></Child>
    	</div>
    );
  }
  componentDidCatch(error,errorInfo){
  	this.setState({
	    hasError:true
    })
   }
}


class Child extends React.Component {
	
  render() {
  	/* if (this.state.posts) {
  	      return this.state.posts.mmmmaaaaapppp(x => <h1>{x}</h1>);
  	    } */
  	return (
    	<div>
    	  <h1>I am child</h1>
    	</div>
    );
  }
  
  componentDidMount(){
		fetch("https://jsonplaceholder.typicode.com/posts").then((response) => {
      this.setState({posts: []});
    }).catch((error)=>{
    	console.log("Error caught in catch",error);
    })
    ;
  }
}



ReactDOM.render(<Parent name="world"/>, document.getElementById('container'));