I'm having trouble displaying an icon over the react crop component. The icon (undo button) is not visible when the react crop component is present, but it appears when I remove it.
My code with the react crop component:
return (
<div>
<div className="webcamCapture">
{ campic}
</div>
{ buttons}
{this.state.imageData && (
<>
{src && (
<div className="preview">
<ReactCrop
src={src}
crop={crop}
ruleOfThirds
onImageLoaded={this.onImageLoaded}
onComplete={this.onCropComplete}
onChange={this.onCropChange}
/>
</div>
)}
</>
)}
</div>
)
This is my icon component that I want to display over the react crop:
<div className="preview">
<div >
<FontAwesomeIcon className="preview__close" icon={faChevronLeft} onClick={() => this.setState({ imageData: null })}/>
</div>
</div>
Here is my CSS code:
.preview {
position: relative;
}
.preview__close {
position: absolute;
top: 0;
margin: 5px;
cursor: pointer;
color: red;
}
If anyone can provide assistance, I would greatly appreciate it!