1

In my project, using input field to add and update images.

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

export const Imagecrop = () => {
  const [src, setSrc] = useState(null);
  const handleFileChange = (e) => {
    console.log(e.target.files[0]);
    setSrc(URL.createObjectURL(e.target.files[0]));
    console.log("src", src);
  };
  const [image, setImage] = useState(null);
  const [crop, setCrop] = useState({ aspect: 16 / 9 });

  return (
    <div className="container">
      <div className="row">
        <div className="col-6">
          <input type="file" accept="image/*" onChange={handleFileChange} />
        </div>
        <div className="col-6">
          {src && (
            <ReactCrop
              src={src}
              onImageLoded={setImage}
              crop={crop}
              onChange={setCrop}
            />
          )}
        </div>
      </div>
    </div>
  );
};

There are no errors.

enter image description here

I want to show the selected image to the second column but the file name is getting displayed here. Please give me some suggestions to fix this problem and the codesandbox link: https://codesandbox.io/s/polished-snow-fb61he?file=/src/imagecrop.js

user15361826
  • 322
  • 2
  • 13
  • 1
    Try not to rely on `console.log()` for checking state. State values don't update until the next render cycle – Phil Sep 06 '22 at 06:28
  • add sample in https://codesandbox.io/ for debugging is better – A.R.SEIF Sep 06 '22 at 06:29
  • codesandbox link: https://codesandbox.io/s/polished-snow-fb61he?file=/src/imagecrop.js – user15361826 Sep 06 '22 at 06:33
  • I think you need to study the react-image-crop [documentation](https://github.com/DominicTobias/react-image-crop#usage) closer. It does not accept a `src` prop but instead should have an `` child – Phil Sep 06 '22 at 06:37
  • @Phil The issue is with the crop component usage. Duplicate answer does not solve it. – A G Sep 06 '22 at 06:38
  • The duplicate answer solves your `console.log()` problem. Reading the documentation solves your `ReactCrop` problem so the question could have been closed as a typo anyway – Phil Sep 06 '22 at 06:40
  • 1
    @user15361826 Fixed sandbox -> https://codesandbox.io/s/distracted-euclid-cfd83m – A G Sep 06 '22 at 06:44

0 Answers0