Updating and Deleting in React


Not CompletedBuilding a Delete Click Handler in React

Welcome to this section where we're going to learn how we can build out the edit and delete functionality for our portfolio items.

Not CompletedHow to Delete API Data in React and Update State

Now that we have a handler built, that is listening for any user to click on Delete, we now have the ability to call the outside API, pass in the delete verb and then have it remove that record from the database.

Not CompletedInstalling and Configuring Font Awesome in React

Now that we have the delete functionality working properly, we're going to add some styles. And specifically we're gonna integrate FontAwesome so that we can have icons in the spots of our application where it makes sense.

Not CompletedHow to Style Font Awesome Icons in React

Now that we have Font Awesome installed in our application, now we can start using these icons and styling them and you'll see how we are able to treat them exactly like any kind of text content in our application.

Not CompletedFont Awesome Naming Requirements for React Components

This is gonna be a relatively quick guide where we build out the icon for the sign out button here.

Not CompletedBuilding an Edit Click Handler in React

Now that we have the delete functionality completed, we've completed three out of the four CRUD features. Remember, CRUD stands for create, read, update, and delete.

Not CompletedPopulating the Portfolio Edit Form in React

Now that we're effectively updating state every time that a user clicks on the edit icon here, the next step is to connect our portfolio form with our portfolio manager for the edit functionality.

Not CompletedMaking Dynamic Axios API Queries in React

So now when the user clicks on the edit button, they automatically populate the form, at least the text fields of the form, and all of that works perfectly.

Not CompletedWorking with New and Edit Workflows in React

Now that we have our edit functionality working properly, it's time to connect the parent component with our form component, and what we're gonna do is build out two different workflows.

Not CompletedGuide to Multi Line Ternary Operators in React for Showing and Hiding the Dropzone Components

Now that we have the basic functionality for our update form working perfectly, it's time to move on to how we can work with images.

Not CompletedPopulating Image Thumbnail Conditionals and Styles

Now that we know that we can build dynamic behavior into our image upload section, we're going to populate that into the rest of the images and into our banner and our logo.

Not CompletedAdding Delete Image Links to the Image Thumbnails

This is gonna be a relatively quick guide where we add the delete link for each one of our images.

Not CompletedFixing an Image Edit Bug

So before we can get into adding the ability to delete our thumbnails and banners and logos, in between these guides, I found a bug in our application.

Not CompletedFinalizing the Image Delete Functionality

Now that we've fixed that image editing bug, we are ready to implement the delete functionality.

Unsupported Browser

devCamp does not support ancient browsers.
Install a modern version for best experience.