perjansson

const reverseString = input => {
    const stack = []
    for (let s of input) {
        stack.push(s)
    }

    let output = ""
    while (stack.length > 0) {
        output += stack.pop()
    }

perjansson

style = loading => {
  return {
    transition: '0.5s filter linear',
    filter: `${loading ? 'blur(50px)' : ''}`,
  }
}

render() {
  const { currentImage, loading } = this.state
  const { alt } = this.props

perjansson

fetchImage = src => {
  const image = new Image()
  image.onload = () => this.setState({ currentImage: this.loadingImage.src, loading: false })
  image.src = src
  this.loadingImage = image
}

perjansson

componentDidMount() {
  this.fetchImage(this.props.image)
}

perjansson

class ProgressiveImage extends Component {
  state = {
    currentImage: this.props.preview,
    loading: true,
  }

perjansson

<ProgressiveImage
  preview="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAS......"
  image={`/static/images/burgers/${id}.jpg`}
/>

perjansson

// Render function of ProgressiveImage
render() {
  return this.props.render(loading)
}

// Usage
render() {
  return (
    <ProgressiveImage
        render={(src, loading) => (

perjansson

class ProgressiveImage extends Component {
  state = {
    currentImage: this.props.preview,
    loading: true,
  }

  componentDidMount() {
    this.fetchImage(this.props.image)
  }

perjansson

var cars = this.cars.map(car => ...
var message = 'No cars'
   if (cars.length) {
      var randomCar = null
      message = `The best car is ${randomCar}`
      ...
      
// becomes

const cars = this.cars.map(car => ...

perjansson

onClick={function(e) {
   this.setSelectedCar(e.target.value)
}.bind(this)}

// becomes

onClick={e => this.setSelectedCar(e.target.value)}