JSFiddle - React, Tailwind, and code Playground

by SupunKavinda

HTML

<div id="view"></div>

CSS

.quote-view {
  padding:15px;
  margin:10px;
  border-radius: 5px;
  background: #3f4046;
  color: #fff;
}

React

class ProgrammingQuotes extends React.Component {

	constructor(props) {
  	super(props);
  
  	this.state = {
			isLoaded: false,
      error: null,
      quotes: []
    };
  }
  
  componentDidMount() {
  
		var xhr = new XMLHttpRequest();

		xhr.addEventListener("readystatechange", () => {
			if (xhr.readyState === 4) {
      	if (xhr.status === 200) {
        	// request succesful
        	var response = xhr.responseText,
          		json = JSON.parse(response);
              
          this.setState({
          	isLoaded: true,
          	quotes: json
           });          
        } else {
        	// error
          this.setState({
          	isLoaded: true,
            error: xhr.responseText
          });
        }
			}
		});

		xhr.open("GET", "https://programming-quotes-api.herokuapp.com/quotes/page/1", true);
		xhr.send();
  
  }
  
  render() {
  
  	var body;
    
    if (!this.state.isLoaded) {
    	// yet loading
      body = <div>Loading...</div>
    } else if (this.state.error) {
    	// error
      body = <div>Error occured: { this.state.error }</div>
    } else {
    	// success
       
      var quotes = this.state.quotes.map(quote => <div key={quote.id} className="quote-view">{ quote.en }</div>);
      
    	body = <div>{quotes}</div>
    }
  
  	return body;
  } 

}

ReactDOM.render(
	<ProgrammingQuotes />,
  document.getElementById('view')
);