And you may have already found it if you tested out the edit functionality with a little bit more rigor, and so we're gonna fix that bug here, but let's walk through it first. It's a bug related to the images, and it's something that happens whenever you're in edit mode, and you add an image that does not exist yet, so let's walk through an example of this.

So if I click on another one right here, or any record that does not have all three images filled out, you can see if I were to click on banner, and then upload some demo image, you can see that it no longer is a Dropzone component, but it has switched, and that is because of how our triggers work.

We have that on drop trigger, and what's happening is, it's updating state and it's saying, okay, we have a banner image, and so it's triggering our conditional, and it's showing the image even when it doesn't exist, so it's kind of an in-between type of state, and so we need to fix that before we can build out the rest of this feature.

There's a pretty easy fix for it, and what we're gonna do is, we're going to have a slightly different name for the images if they're in edit mode, so that way, we have a clear distinction on images that are new, and those are gonna be images that are specifically designated for Dropzone components and then we're gonna have some thumbnail components and so let's switch into the code to get this fixed.

I'm gonna come down here, and inside of our componentDidUpdate in our portfolio form, instead of thumb_image, banner_image, and logo, this is where the issue is occurring is right here, we are setting the exact same names, and we're working with the same names, and that's where the conflict is, so we can fix this by, I'm just going to update the name here to underscore U-R-L for each one of these, and this even matches exactly what the state name is.

portfolio-form.js

thumb_image_url: thumb_image_url || ""
banner_image_url: banner_image_url || ""
logo_url: logo_url || ""

And so now, what we can do is, in our conditional, we can check not only for edit mode, but we can also check for this more specific name here, so I'm going to come back, I'm gonna come all the way down, and in our conditionals, inside of our JSX code, we're no longer gonna check for thumb_image or banner_image.

Now we're gonna check for thumb_image_url and that's what we're going to place inside of this image tag, and we're gonna do that for the thumb, then for the same thing, for the banner, and then also, for the logo, so let's add that underscore U-R-L to the logo, hit save, and now let's see if this is working.

portfolio-form.js

{this.state.thumb_image_url && this.state.editMode ? (
  <div className="portfolio-manager-image-wrapper">
    <img src={this.state.thumb_image_url} />

{this.state.banner_image_url && this.state.editMode ? (
  <div className="portfolio-manager-image-wrapper">
    <img src={this.state.banner_image_url} />

{this.state.logo_url && this.state.editMode ? (
  <div className="portfolio-manager-image-wrapper">
    <img src={this.state.logo_url} />

So I'm gonna come down here, and we'll click on another one again, and now if I click on Banner and add an image to it, you can see that it's working.

We're now still within the Dropzone component, it has not switched over into a thumbnail, so thumbnails should only be there if that is an image that is live on the server, the API sent it back and said, this image belongs with this portfolio record, so all of this should be good now and we should be able to move on with adding our delete functionality.

Resources

• Source code