I am facing this issue. I had attached the code and error is in the DOM. Tried to fix the issue in various methods and ways but it's not fixing.
I am not able to know why it's getting DOM nesting I don't understand the exact issue in the code. Could anyone help with the solution
import React, { useRef, useState } from "react";
import AvatarEditor from "react-avatar-editor";
import Avatar from "@material-ui/core/Avatar";
import {MuiThemeProvider} from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";
import { Grid, Button, Paper } from "@material-ui/core";
import ImageIcon from "@material-ui/icons/Image";
export default function Image() {
const [ state, setState ] = useState({
cropperOpen: false,
img: null,
remove: "",
zoom: 1,
croppedImg: "",
});
const editorRef = useRef(null);
const inputRef = useRef(null);
function handleZoomSlider(event, value) {
setState((prev) => ({ ...prev, zoom: value }));
}
function handleRemove() {
setState((prev) => ({ ...prev, croppedImg: null }));
}
function handleFileChange(e) {
window.URL = window.URL || window.webkitURL;
let url = window.URL.createObjectURL(e.target.files[0]);
inputRef.current.value = "";
setState((prev) => ({ ...prev, img: url, cropperOpen: true }));
}
function handleCancel() {
setState((prev) => ({ ...prev, cropperOpen: false }));
}
function handleSave() {
if (editorRef.current) {
const canvasScaled = editorRef.current.getImageScaledToCanvas();
const croppedImg = canvasScaled.toDataURL();
setState((prev) => ({ ...prev, cropperOpen: false, croppedImg }));
}
}
return (
<MuiThemeProvider>
<Grid container spacing={2} alignItems="center">
<Grid item xs={2} sm={2} md={2} lg={2} xl={2}>
<Avatar style={{ width: "90px", height: "90px" }} src={state.croppedImg} />
</Grid>
<Grid item xs={5} sm={5} md={4} lg={4} xl={3}>
<input
accept="image/*"
ref={inputRef}
onChange={handleFileChange}
id="Upload an Image"
type="file"
multiple
hidden
/>
<label htmlFor="Upload an Image">
<Button fullWidth variant="contained" color="secondary" component={"span"}>
Upload an Image
</Button>
</label>
</Grid>
<Grid item xs={5} sm={5} md={4} lg={3} xl={3}>
<input accept="image/*" onChange={handleRemove} id="Remove Image" multiple hidden />
<label htmlFor="Remove Image">
<Button fullWidth variant="outlined" color="secondary" component={"span"} onClick={handleRemove}>
Remove Image
</Button>
</label>
</Grid>
</Grid>
{state.cropperOpen && (
<Paper
style={{
position: "absolute",
left: "440px",
right: "100px",
top: "100px",
width: "30%",
background: "rgba(200,200,200,.8)",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
zIndex: "1",
}}
>
<Grid container justify="center">
<Grid
item
xs={12}
style={{
fontFamily: "Campaign",
fontSize: "20px",
fontWeight: "bold",
fontStretch: "normal",
fontStyle: "normal",
lineHeight: "1.6",
letterSpacing: "normal",
textAlign: "center",
color: "#181d1e",
height: "60px",
padding: "20px",
background: "#FFFFFF",
}}
>
<span>Create Profile Image</span>
</Grid>
</Grid>
<AvatarEditor
ref={editorRef}
image={state.img}
width={370}
height={400}
disableBoundaryChecks={true}
disableHiDPIScaling={true}
opacity={10}
border={1}
color={[ 255, 255, 255, 0.6 ]}
scale={state.zoom}
borderRadius={200}
/>
<Grid container justify="center" style={{ background: "rgba(255,255,255,0.8)" }}>
<Grid item xs={8} display="flex" justify="center" alignItems="center" container height="55px">
<ImageIcon />
<Slider
min={1}
max={10}
step={0.1}
value={state.zoom}
onChange={handleZoomSlider}
style={{ width: "150px", marginLeft: "10px" }}
/>
<ImageIcon fontSize="large" />
</Grid>
</Grid>
<Grid
container
justify="space-evenly"
alignItems="center"
style={{ background: "#FFFFFF", height: "60px" }}
>
<Grid item xs={5} sm={5}>
<Button
fullWidth
type="button"
variant="outlined"
color="primary"
onClick={handleCancel}
width="100%"
>
Cancel
</Button>
</Grid>
<Grid item xs={5} sm={5}>
<Button
fullWidth
type="button"
variant="contained"
color="secondary"
onClick={handleSave}
width="100%"
>
Save
</Button>
</Grid>
</Grid>
</Paper>
)}
</MuiThemeProvider>
);
}
