react javascript image cropper Cannot read properties of null

Question

Im trying to get this code for image browsing then cropping the browsed image working:

This is the supposed code to be working:

import "./styles.css";
import React, { useState } from "react";
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css'


export default function App() {
  const [src, selectFile] = useState(null);

  const onImageChange = (event) => {
    selectFile(URL.createObjectURL(event.target.files[0]));
  };

  const [image, setImage] = useState(null);
  const [crop, setCrop] = useState({ aspect: 16 / 9 });
  const [result, setResult] = useState(null);
  function getCroppedImg(){
    const canvas = document.createElement('canvas');
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = crop.width;
    canvas.height = crop.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage
    (
      image,
      crop.x * scaleX,
      crop.y * scaleY,
      crop.width * scaleX,
      crop.height * scaleY,
      0,
      0,
      crop.width,
      crop.height,
    );
    
    const base64Image = canvas.toDataURL('image/jpeg');
    setResult(base64Image)

  }



  return (
    <div className="container">
      <div className='row'>
    <div className='col-6'>
    <input type="file" accept ='image/*' onChange={onImageChange}/>
</div>
{src && <div className='col-6'>
<ReactCrop src={src} onImageLoaded={setImage} crop={crop} onChange={setCrop} />
<button className='btn btn-danger' onClick={getCroppedImg} > Crop Image </button>
  </div>}
  {result && <div className='col-6'> <img src={result} alt='Cropped Image' className='img-fluid' /> 
  </div>}
  </div>
</div>
  );
}

You can use this sandbox link to immediately test and debug the code and see the error, code testing in sandbox

This full code is not mainly mine, I have been following this tutorial on youtube as im trying to get it working to learn and use it on my main project, But i cannot get it working as in there this error, which is not actually in the tutorial as im not even missing any line of code so i cannot understand why this error happening, appreicated to make me understand why it happened. this is the yt link: yt tutorial code

Also to add, When i try to browse the image in the current code it doesn't work so I actually tried to fix it by adding this line

<img src={src} />

under the it actually started to work for showing the image, but the cropping functionality is not working.

Answer 1

I have managed to solve the error by adding in the React Crop part this part:

   <div>
   {srcImg && (
     <div>
       <ReactCrop
           style={{ maxWidth: "50%", maxHeight: "50%" }}
                  crop={crop}
                   onChange={setCrop}
                 >
                  <img
                    src={srcImg}
                     onLoad={onLoad}
                  /></ReactCrop>

seems like on react crop image the onimageloaded function is no longer functioning thats why i couldn't get it to work before and the image was null, therefore i used the onLoad for the img to make the crop function work again.