So if we go back to Google Chrome right now, if you go down to any of your records that have three images, so I'm gonna click on this Toastability one and you'll see we have our three images. What I wanna do is have a little delete link down here that will allow us to get rid of any of these images if we're not using them.

So that's what we're gonna do in this guide. We're not actually gonna build in the delete functionality quite yet, instead, we're just going to add that link there, add a function, call it and then make sure that that's working so let's get started on that.

I'm gonna start off by actually creating the function just so we know that we have it. So I'm gonna come down here and just say this.deleteImage and we'll bind it to this like normal. So this.deleteImage.bind(this) and now what we can do is actually just create that function.

portfolio-form.js

this.deleteImage = this.deleteImage.bind(this);

So I'm gonna say deleteImage and now our delete image is going to take in a image type. So when I mean image type what that means is we're gonna pass a string in, such as thumb or logo or anything like that and that is how our delete image is going to know which record to delete, but we're not gonna worry about that right now, for right now let's just console log this out. So I'll console log, deleteImage, and we're going to just say that we want to print out whatever the image type is just to make sure that's working.

Now let's come down into our giant ternary operators down in our JSX code and let's go to the very first one. So you can see here we have our portfolio image wrapper and inside of here, I'm also going to add some text. So let's just give this a div and I'm gonna give this a className just in case we wanna style it, we can select this specifically. And I'll say image-removal-link and then inside of here this is gonna be an A tag, but make sure you close out your div.

So this is gonna be an A tag and it's gonna have an onClick listener and this onClick listener is going to be an anonymous function. Remember we use this process because we do not want this to fire until a user has clicked on the record and so what we're gonna do here is just give the parenthesis and then it's going to be a fat arrow function and from here we can call this.deleteImage and then here let's call this one, thumb_image.

Now it's important in this case specifically that we're using this underscore. So notice we're not saying thumbImage like this. We have to use this because this is gonna be important when we actually call the API, so we're going to use that. That's how our system's gonna know what value to delete.

So that's gonna be the first part that's just our onClick handler and now we can just put some text in there, say something like Remove File. You can put whatever you want there and then make sure you close off the A tag and it looks like I have a little syntax error. Let's see where that is at, so I have everyone watching this is probably seeing it right now.

So I have className, that's all right. Okay, it's saying that we have a div. Oh, I know, it's because I didn't actually close off the A tag, there we go, okay.

portfolio-form.js

<div className="image-removal-link">
  <a onClick={() => this.deleteImage("thumb_image")}>
    Remove file
  </a>
</div>

So, this should all work, but before we go and we populate it let's actually make sure that it's working for our thumb image. So I'm gonna come here and we can actually click on any of these and there we go, it says remove file.

If you open up the JavaScript console, and click on this you can see it says delete image, thumb_image so that's working perfectly.

Let's now populate this across all of our other records, so the other two records. So I'm going to do this for the banner image, the only change that you need to make here is in the value that is being called or being passed to the delete image.

So here we're gonna have the banner image.

<div className="image-removal-link">
  <a onClick={() => this.deleteImage("banner_image")}>
    Remove file
  </a>
</div>

Then the last one is going to be the logo. So I'm gonna paste that in and instead of banner image, it will say logo.

<div className="image-removal-link">
  <a onClick={() => this.deleteImage("logo")}>Remove file</a>
</div>

Okay, now let's go back and click on a record that has all three items and now you can see that we have this remove file link for all three of them.

So with this in place, we are pretty much ready, but let's add a few styles here. Because right now it's not even really clear that that's a link so let's kinda update that. We have this image removal link style, this class, so we can come in here to our portfolio-form.scss and we can update that.

So, let's come and add that .image-removal-link class and once again in our portfolio-form style sheet and then I wanna select the A tag inside of here and let's go with a font weight of 900, I'm gonna go with a color of warning, and then make sure that you use a cursor of pointer just to make it very explicit that that's what we're using.

portfolio-form.scss

.image-removal-link {
  a {
    font-weight: 900;
    color: $warning;
    cursor: pointer;
  }
}

Then let's come back and now you can see that that is in red so that is all looking good.

Now the other thing I would like to do is I'm gonna make the image removal link a flex container so I'm gonna say display flex and justify content, center, and that should center each one of those links and yes it did.

.image-removal-link {
  display: flex;
  justify-content: center;
  a {
    font-weight: 900;
    color: $warning;
    cursor: pointer;
  }
}

So we have remove file, remove file, remove file. And if you click on any one of these like the logo, now it says delete image logo.

So everything here is working and I think this is all wee need to do. If you want some extra credit, if you want to try something a little bit different, I'd recommend doing something like looking at font awesome and maybe picking out another icon even besides the trash icon, they have a few other delete icons. Go through the process of importing that into the app component and then calling it directly in the link here. That might be something that would be good practice in between this guide and the next one.

But now that we have those links, in the next guide we're actually going to make them work. So we're gonna be able to click on this and it is going to delete the record and then it's also going to clear the image out and replace it with the drop zone components if we want to upload another replacement image.

Resources

• Source code