title: ReactJS: How to clear an image preview from a parent component
body: <p>A component of a library I'm using is essentially a wrapper around <code>&lt;input type=file&gt;</code>, which manages the buttons to upload a new image, change it or remove it, while also providing a thumbnail of it. This is its simplified definition:</p>
  <pre><code>import defaultImage from &quot;assets/images/default_image.jpg&quot;;
  
  export default function ImageUpload(props) {
    const { image, setImage } = props;
    const [imagePreviewUrl, setImagePreviewUrl] = useState(defaultImage);
    let fileInput = React.createRef();
    const handleImageChange = e =&gt; {
      e.preventDefault();
      let reader = new FileReader();
      const imageFile = e.target.files[0];
      reader.onloadend = () =&gt; {
        const image = reader.result;
        setImage(image);
        setImagePreviewUrl(image);
      };
      reader.readAsDataURL(imageFile);
    };
    const handleClick = () =&gt; {
      fileInput.current.click();
    };
    const handleRemove = () =&gt; {
      setImage(&quot;&quot;);
      setImagePreviewUrl(defaultImage);
      fileInput.current.value = null;
    };
    return (
      &lt;div&gt;
        &lt;input
          type=&quot;file&quot;
          onChange={handleImageChange}
          ref={fileInput}
        /&gt;
        &lt;div&gt;
          &lt;img src={imagePreviewUrl} /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          {image === null ? (
            &lt;Button onClick={() =&gt; handleClick()}&gt; {&quot;Select image&quot;} &lt;/Button&gt;
          ) : (
            &lt;span&gt;
              &lt;Button {...changeButtonProps} onClick={() =&gt; handleClick()}&gt; Change &lt;/Button&gt;
              &lt;Button {...removeButtonProps} onClick={() =&gt; handleRemove()}&gt; Remove &lt;/Button&gt;
            &lt;/span&gt;
          )}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>The parent is basically collecting this and other components's states and stores them into a redux store. All works well, until I try to clear the preview image.</p>
  <p>As <code>input</code> is not a controlled component in react, I'm not quite sure how to do that.
  I though about passing the <code>setImagePreviewUrl</code> as a prop, but I'm not entirely sure how to implement it.</p>
  <p>How can I clear that preview image?</p>