Image Component with fallback using hooks

fallbackimage.js

import React, { useState } from 'react'

// assuming you have a custom fallback for a given param: id
const fallback = id => `https://fallback.distro.com/${id}.png`

const image = id => `https://images.distro.com/${id}.png`

export default props => {
  const { click, id } = props
  
  const [url, setUrl] = useState(image(id))
  
  const err = () => setUrl(fallback(id))

  return (
    <img
      alt=''
      title={id}
      src={url}
      onError={err}
      onClick={() => click(id)}
    />
  )
}