JSFiddle - React, Tailwind, and code Playground

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">
<div id="root"></div>

Babel + JSX

class App extends React.Component{
	state = {images : []}
  
  onSearchSubmit = async term =>{
  	const response = await axios.get('https://api.unsplash.com/search/photos',
    {
    	params: {query: term},
      headers:{
      	Authorization: 'Client-ID d0d3e6aac60acb32233961e7837f13fb5b0cbe412fdd29f4c7b0cbe83c7628fb'
      }
    })
    	
    this.setState({images: response.data.results})
  }
  
  render(){
  	return (
    	<div className='ui container' style={{marginTop: '10px'}}>
        <SearchBar onSubmit={this.onSearchSubmit} />
        Found: {this.state.images.length} images
        <ImageList images={this.state.images} />
      </div>
    )
  }
}


class SearchBar extends React.Component{
	state ={ term : ''};
  
  onFormSubmit = event => {
  	event.preventDefault();
    this.props.onSubmit(this.state.term)
  }
  
  render(){
  	return (
    	<div className='ui segment'>
    	  <form onSubmit={this.onFormSubmit} className='ui form'>
    	    <div className='field'>
    	      <label for='a'>Image Search</label>
              <input id='a'
                type='text'
                value={this.state.term}
                onChange={e=>this.setState({term: e.target.value})}
              />
    	    </div>
    	  </form>
    	</div>
    )
  }
}

class ImageCard extends React.Component{
	constructor(props){
  	super(props);
    this.state = { spans: 0 };
    this.imageRef = React.createRef();
  }
  
  componentDidMount(){
  	this.imageRef.current.addEventListener('load',this.setSpans);
  
   	//console.log(this.imageRef);
  	//console.log(this.imageRef.current.clientHeight);
  }
  
  setSpans = () =>{
  	//console.log(this.imageRef.current.clientHeight);
		const height = this.imageRef.current.clientHeight;
    const spans = Math.ceil(height / 10);
    this.setState({ spans})
  }
  
	render(){
  	const {description, urls} = this.props.image;
    
  	return(
    	<div style={{ gridRowEnd: `span ${this.state.spans}`}}>
    	  <img 
         ...