score:0

Accepted answer

Ok so I expect you have an button to delete the post image.

When you are clicking in the button you are calling deleteImageFromAlbum() method for example. So the code will be :

const deleteImageFromAlbum = photoID => {
  setUrl('')
  setPhoto(photos.filter(photo => photo.id !== photoID));
}

the filter method update the array and takes all photos which the id is not equal to the targeted photos.

score:0

You create a function to handle delete action. It returns new photo with removed record that matches id

const handleDelete = id => {
    setUrl(null);
    setPhoto(prevState => prevState.filter(x => x.id !== id));
  };

and you then you add this button somewhere inside rendered list

<div onClick={() => handleDelete(p.id)}>delete</div>

In case you want just delete open prevew:

const hanldeDeletePreview = url => {
 setUrl(null);
 setPhoto(prevState => prevState.filter(x => x.url !== url));
};

and add button somewhere like this

<div>
 <img src={Url} />
 <div onClick={() => hanldeDeletePreview(Url)}>delete</div>
</div>

It filters you list by url so it if you have list with matching urls then it will delete all of them. If you want to delete it based on id then you should redo your url preview logic to use id instead.

Here is the rewrite that uses id to show preview

  const [previewId, setPreviewId] = useState(null);

  const showPicture = id => {
    setPreviewId(id);
  };

  const handleDelete = id => {
    setPhoto(prevState => prevState.filter(x => x.id !== id));
  };

  const hanldeDeletePreview = id => {
    setPreviewId(null);
    handleDelete(id);
  };

  const previewHelper = () => {
    const selected = photo.find(x => x.id === previewId);
    return selected ? (
      <>
        <img src={selected.url} />
        <div onClick={() => hanldeDeletePreview(previewId)}>delete preview</div>
      </>
    ) : null;
  };
return (
    <div>
      <div>{previewHelper()}</div>
      <div>Posts</div>
...

<img
  src={p.thumbnailUrl}
  thumbnailUrl={p.thumbnailUrl}
  onClick={() => showPicture(p.id)}
/>

Related Query

More Query from same tag