I want to create an onClick function that will remove the most recently added image from the input array and prevent it from displaying.
Check out my code below:
<div>
<form>
<input type="file" name="pic" accept="image" onChange={this.handleClick} multiple />
<input type="submit"/>
<button className={"clear"}>Clear last image</button>
</form>
</div>
<div style={formStyle}>
{this.state.array.map((item, i) =>
<img
style={imgStyle}
src={URL.createObjectURL(item)}
key={i}
/>
)}
</div>
In this snippet, I capture a user's uploaded image file and store it in a state array before displaying it. While there isn't a direct post addressing this issue, I am curious if anyone knows how to efficiently remove the last uploaded image tag from the DOM?