Editing an Existing Group

My goal for today is to create the EditGroup component, and then get it working. I start off in the Group component by adding a simple button with a Link. I know that when the user clicks the button, I want the app to redirect to the EditGroup component with the form data pre-filled with the existing group data. From there, the user will only need to update the parts of the data that they want to, and then submit.

I decide that this is a good time to add the Route to the edit screen to App.js. I import the EditGroup component into App.js, and then create the Route to render the EditGroup component when directed to path='/groups/:id/edit'.

After this I create the EditGroup component. For the sake of consistency I duplicate the AddGroup component form and then make a few basic changes, such as removing the handleSubmit function until I'm ready for that functionality. I jump into the test server and make sure that everything is working as intended. I confirm that the Group component has the Edit button, and clicking the Edit button redirects to the EditGroup component. The next step is to use props, once again, to populate the for in EditGroup with the existing data.

I decide to try to use the same method as before where, instead of making an API call, I'll use props to send the data between components. In this case, I'll send the data from the Group component to the EditGroup component, and then use that data to pre-fill the form with the data.

At first this seems straight forward enough. I look back at the Link in the Groups component and copy the format. Then I go to the EditGroup component and add the props parameter to my constructor function. I copy the props destructuring format so that I can set the group object in the state of the EditGroup component, and then go to test on my local server. I find a react error that the props are undefined and I begin troubleshooting.

The first thing I realize is that I'm not sending the data through the props like I thought. I realized this by looking at the React Dev tools and seeing in the Link that the 'to' property did not contain the group object like I needed it to. I reviewed the code and realized that I needed to update the group object in the code to this.state.group since I hadn't destructred the state in this component the same way as I had before in the Groups component. Now when I check the React Dev tools I can see that the group object is being sent through the link.

I had to update the 'group' value to 'this.state.group'

Now I expected the EditGroup component to work, but when I click the edit button I get similar React error, that props is still undefined. But I just confirmed that the group object was available in the component just before! I go back to the code and start looking for differences between my Group component and EditGroup component when I spot the culprit, I haven’t EditGroup using withRouter()! I go ahead and import withRouter() from 'react-router-dom' and then export using withRouter() at the end of the file, and go for another test. Sure enough, this time when I click the Edit button I'm directed to the EditGroup form and the data is already populated for me! Now I can edit the existing data in the form. Next up, I need to write a handleSubmit method which will send the updated form to the API, but not before I commit my changes.

For the handleSubmit method I start by copying the handleSubmit method that I wrote for the AddGroup form, since they will be essentially the same with a few minor changes. I paste the method into the EditGroup component and start by updating the method in the axios call from a 'post' to a 'patch' since I'm not creating a new group, but updating an existing one. I also change the success and error messages to edit success/fail instead of add success/fail. I jump into the server, make a small change to the form data, and submit. I see the failure message. I look back at the code and realize that I did not update the url to include the group id. I add the group ID to the interpolated string and test again, and this time I see the success message. I do a few more test by creating and then editing a new group and once I'm satisfied I commit the changes.