Quite a bit of this is going to be reinforcement learning because we're gonna follow the same patterns that we followed when we are performing this task for our portfolio items.

So, let's get into the code, we're gonna be able to move pretty quickly through this since we're really replicating some of the processes we've already implemented. We're using some of the same classNames, and following some of the same patterns.

So, let's walk through what we want to be able to add to our app. I created a new post here called With Featured Image that has a featured image already uploaded. And what the expected behavior here is, if I click on the title, I want to have our featured image populated here instead of Dropzone.

So, this is identical to the behavior that we implemented with our portfolio items. And if we don't have an image here, then I want to just have our Dropzone component. If we click on Delete that Image, it should delete it on the server, render Dropzone, and allow us to upload a new image. So, let's get started with that, we're gonna implement the first part of this behavior in this guide.

So, switching to Visual Studio Code, we have our blog form component up. And if you wanna reference the portfolio item, and what we already built out, feel free to.

This is the reason why we try to create patterns that you can replicate so that you can follow those same types of code patterns and the same processes so that you don't have to relearn everything or re-implement everything from scratch.

In a perfect scenario, where we have even an extended period of time in order to do this, the real best practice would be even to take this type of behavior and wrap it up in its own component.

So, you could have some type of special Dropzone component that can take in a default image if there is one, and it could pass props back and forth between the form. And then you could call a single component, and you could do that from the blog form, from the portfolio form, or anything else.

So, if you want some extra credit, I definitely recommend going through and trying to do something like. This course is already incredibly long, so we're not going to do it in this course, but you already know all of the processes and the skills in order to implement it. So, if you feel like it, I definitely recommend doing that.

So, in this guide, we're simply gonna follow this same pattern. We're gonna start with a condition, we're gonna check to see if we're in Edit mode, and we're also going to see if an image exists, and if so, we're gonna render out that image.

So, let's start now, move down to where we have our JSX code, and also where we're calling our Dropzone component. And now, we're not working with state, remember we're working with props, so we need to be cognoscente of that. And so, right under our image uploaders div, I'm going to start our ternary conditions.

So, I'm gonna say this.props.editMode. So, if we're in Edit mode, and this.props.blog.featured_featured_image_url. So, if we have an image and we're in Edit mode, then I wanna perform one task, I wanna render out the image itself.

For right now, I'm just gonna give us an h1 heading here, and I'll say image goes here, just to make sure it's working. And then, add a colon, and then close off right after DropzoneComponent with the end of the curly bracket. So, that wraps up the entire process inside of a ternary operator.

blog-form.js

<div className="image-uploaders">
  {this.props.editMode && this.props.blog.featured_image_url ? (
    <h1>Image goes here ... </h1>
  ) : (
    <DropzoneComponent
      ref={this.featuredImageRef}
      config={this.componentConfig()}
      djsConfig={this.djsConfig()}
      eventHandlers={this.handleFeaturedImageDrop()}
    >
      <div className="dz-message">Featured Image</div>
    </DropzoneComponent>
  )}
</div>

And let's just test this out to see if it's working. I'll switch to Google Chrome, if I click on With Featured Image, and then click on the image, you can see, or on the Edit mode, you can see it says Image goes here, so, that's perfect.

If we click on one that does not have a featured image, remember this image right here was uploaded through the Rich Text Editor. Click on that, and if you scroll down, you'll see that we have our Dropzone component.

All of that's working perfectly, so, now let's go back, and let' add in the call to the image itself. And feel free to come and pull all of this content here for the portfolio manager image wrapper. And one other nice refactor, is you can see, we're reusing a lot of these classes, and we're reusing them, what we thought, in the beginning, was that they were gonna be specific to the portfolio manager, we're seeing that they can be populated in other parts of the app.

So, a good refactor here would be to rename some of the CSS classNames to something more generic, such as image wrapper, or image upload wrapper, something like that, so it makes more sense when we add it to the blog manager, or the blog form, and the portfolio form. So, I'll leave that up to you to perform some refactors like that.

And I'm just gonna paste that in here. And now, instead of saying this.state.banner_image_url, I'm going to call our props, 'cause we can be assured that we have a featured image here. So, I'll call this.props.blog.featured_image_url. And then, I'm going to not worry about this onClick handler for right now, and that's because in the next guide we will start implementing that. So, for right now, I'm just gonna pull that entire thing out.

Hit Save, and now we can test to see if this is working. So, if I click on With Featured Image, and click on the title to activate Edit mode, you can see we have our nice big image there. It looks good, and we also have the Remove File link down here.

So, all of that's looking very nice, this is exactly the behavior we're looking to implement. If you click on a post without a featured image, then you'll see that we still just have the Dropzone component, which is the behavior we're looking for. So, hopefully, you can see that as you go through on your development journey, as you are building out these kinds of features, each time that you implement something new, it takes a little while to learn it.

If you remember, we spent a few guides just on the behavior we just built out in just a few minutes right now. And as you go along, as you start building out more complex applications, the types of concepts, and skill, and features that used to take you a very long time, are gonna start to become more routine.

And the more times you go through it, you're gonna become more familiar, and you're gonna be able to build some pretty cool functionality, and it's gonna take quite a bit less time.

So, hopefully, that is a little bit encouraging right now to see how quickly we're able to build that entire feature. One, because we're able to replicate what we've already done earlier in the build processes, but also because you're more familiar with the steps.

Hopefully, by now, you're a little more familiar with how to implement a ternary operator in JSX to add some conditional logic to your programs, and how to work with props, and how to work with state and concepts like Edit modes.

So, good job if you went through that. In the next guide, we're gonna build out the call back and that function that allows us to click on the Remove File link and delete the image.

Resources

• Source code