Adding a link, moving the 'delete' button

My first goal for today is to add a nav link to each group listed in the Groups component. I'm using the header element for each group as link. Clicking the link should bring up the page for that specific Group. I add a Link element by importing it from 'react-router-dom' at the top of the file. I want to keep the link itself on the text and not the entire h3 element, so I put the Link inside the h3:

By putting the Link inside the h3 tag I made sure that only the text itself is the link, and not the entire h3 element.

Using a few different groups I run tests and made sure that creating a new group would still work. Once I confirm that the Links are working as intended, I commit the change.

Now that I can access a specific group directly from the list of groups, it makes sense that I can move the 'delete' button from the list (the Groups component) to the specific group (the Group component). I start by cutting the button element from the Groups component and pasting it right into the Group component. I check on the local server and confirm that the button is now only on the Group component and not on the list. The next step is to move the handleDelete method from Groups to Group. Since I'm already making an axios call I don't need to import axios again. I test the delete button now and sure enough, the specific group is now deleted just like I hoped.

At this point I realize that I'm making two axios calls for this component. The first using componentDidMount() to populate the data, and then the second for deleting the group. If I can use the data from the Groups component, I can save myself a call to the API. This will be my next goal, but for now it's time for a break.