So, what I wanna be able to do is to come to one of these records, click on edit, and then instead of just the title and things like the description populating, I also want this entire DropzoneComponent to go away completely, and I want it to be replaced with a thumbnail of the image if it exists. And so, that's what we're gonna start with building out in this guide.

Now, I'm gonna split this into a few guides because this can get a little tricky. In fact, we're gonna be working with one of the largest ternary operators you're ever gonna see in your life, and so I don't want that to be confusing, and that's what we're gonna do in this guide. It's just because we want the ability to show or hide an entire image or an entire DropzoneComponent based on if we're in the editMode and if there is an image there.

So, let's get started on this. Make sure you're in the PortfolioForm Component and I'm gonna come all the way down into the componentDidUpdate function here and inside of setState, I want to add in those image items that we haven't added in yet.

So, what we're gonna have here is a thumb_image, so we're gonna setState and update the thumb_image state if we get that from props. And you can see up top here that we're grabbing this, it's not called thumb_image because the API actually calls it thumb_image_url, and so, for thumb_image, if it exists, we want to update state with it, and just like everything else, if it does does not exist, then I want to return an empty string there.

And then we're gonna do this same thing for the banner_image, we want to grab the banner_image and then we're gonna pull in the banner_image_url, you can see that that's what it's called up here. Make sure you place a , at the end of thumb_image and then lastly, we're gonna do the same thing with the logo. Now, here, you first state, we call this logo, and then the actual record itself, or what we get back from the API is called the logo_url.

portfolio-form.js

this.setState({
  id: id,
  name: name || "",
  description: description || "",
  category: category || "eCommerce",
  position: position || "",
  url: url || "",
  editMode: true,
  apiUrl: `https://jordan.devcamp.space/portfolio/portfolio_items/${id}`,
  apiAction: "patch",
  thumb_image: thumb_image_url || "",
  banner_image: banner_image_url || "",
  logo: logo_url || ""
});

And you can see all of this in our base state, so if you come up to the constructor, you can see that we have thumb_image, banner_image, and logo right here, and so that's all we're doing, is we're populating that data if it exists, if nothing is there it's just gonna be an empty string. So, now that we're getting that data, every time a user clicks on edit those records are gonna be updated, those state attributes are gonna be populated.

Now let's come down, all the way down, into our JSX code, and come to the very first component for Dropzone. So don't worry about the other ones for right now, right now let's just worry about our image for our thumbnail. So we're gonna create, like I mentioned earlier, one of the biggest ternary operators you're ever gonna see, and if it's been a little while and your ternary operator syntax is a little bit rusty, let's walk through a base case and then I'll comment it out.

So, our base case for a ternary is it's in {}, and then from there, we check to see if something is true or not, then we follow that up with a ? and then from there we have something like "do if true" and then we follow that up with a : "do if false".

{true ? "do if true" : "do if fales"}

So that is a ternary operator, we first check for a condition or a set of conditions, like you're gonna see, and then if it's true, we want to perform one task, then we give a : and then whatever comes after the : we want to have that be the second task and you can split this up into multiple lines, and that's what we are going to do.

So you can just keep that there for right now just to kind of use as a model, and then we'll get rid of it. So the first thing we wanna check for is to see if there is a thumb_image, and then we also wanna see if we're in editMode. So inside a {} I can say this.state.thumb_image && this.state.edit.

{this.state.thumb_image && this.state.edit}

So that's what we're checking, so that's kind of like what we're doing right here, we're checking to see, is something true or false. So this is saying it is 10 > 0, so this is some type of condition, and we're saying, so if there is a thumb_image, and we're in editMode, that's the first part.

Now, just following along with our example, now we're gonna give a ?, so now we're gonna say so that's our condition. Now, if that is true, what do we wanna do? Well, for right now, just to make sure that we get our structure right, let's not even worry about showing an image.

Let's just for right now, let's just throw in an h2 tag and inside of it we'll say this.state.thumb_image and all we're gonna say is this.state.thumb_image, it won't be pretty, but we'll see if it's working or not. So, that's the first part, and then from there, we're gonna say, let's give an extra line and then we're gonna have our: and we're gonna say, so if this is true, so if we have a thumb_image, and we're in editMode, then I want you to show this h2 tag.

Now, if not, I want you to show the DropzoneComponent, so I'm just gonna take that curly bracket and put it all the way at the end of our first DropzoneComponent. Make sure you don't include the next one for the banner, and I'm gonna hit save and then the Prettier extension formats it nicely for us. But that is all we need to do, so assuming this works, then we should see the thumb_image inside of a h2 heading. Make sure you get rid of your example here, hit save, and now let's test this out.

<div className="image-uploaders">
  {this.state.thumb_image && this.state.editMode ? (
    <img src={this.state.thumb_image} />
  ) : (
    <DropzoneComponent
      ref={this.thumbRef}
      config={this.componentConfig()}
      djsConfig={this.djsConfig()}
      eventHandlers={this.handleThumbDrop()}
    >
      <div className="dz-message">Thumbnail</div>
    </DropzoneComponent>
  )}

So inside of Chrome, I know I have a thumb_image here, so it should get rid of this DropzoneComponent and show the h2 if this is working. So if I click this, it looks like that worked perfectly, you can see that we now have an h2 heading that brings in the full url from the API, so that is working nicely.

So now that we know we have access to this and also that our conditional's set up properly, let's just add in a call to an image tag. So I'm gonna get rid of that h2, and now let's just add a image tag with a source and then inside of the source say this.state.thumb_image and then we'll just close off that image tag, hit save, and now let's test this out one more time.

<img src={this.state.thumb_image} />

So I'm going to click on another one, and there you go, we have our image populating there.

Now, it doesn't look very pretty because we need to add styles and so I think this is a good spot to take a break, and in the next guide, we're going to add style so that that the thumb_image fits inside of the correct box, and then we're also going to populate that to our banner and to our logo, and then we'll continue on and we'll build the ability to delete and to do things like that.

Resources

• Source code