This is also going to lead us into what I was mentioning earlier, how we can show and hide links whenever users logged in. So this will hopefully be a shorter video and give you a little bit of a break.

So I'm going to open up Visual Studio Code and open up the navigation-container.js. So the goal in this guide is to perform a process that we've performed before where we're switching between a functional component and a class component, but everything that we've done up to this point has been taking a functional component and then converting it into a class component.

Here I wanna go backwards and do it the other way which is good to practice. It is just really good to get that repetition in and understand exactly what comprises each type of component. So inside of our navigation component, I do not think we are going to need any of the items that are specific to class components such as any of the lifecycle hooks or state or anything like that.

So let's take a few minutes and walk through what it takes to take a class component and revert it to a functional component. So it starts at the very top, instead of saying import React and component, you can just say import React and then instead of export default class, now I'm just gonna say const NavigationComponent and then we can get rid of everything after it and say const NavigationComponent equals and then we're gonna pass in an argument because this is just like a regular function.

It's gonna take props and it's gotta be an arrow function so I'm gonna say props equals and then the start of curly braces. So that line right there, line four, that's how it needs to change.

Then from that point, we no longer are gonna have constructors so remove that and a functional component doesn't have a render function either so I'm gonna get rid of that and then at the very bottom get rid of the last matching curly brace.

We have one more step, we also need to export this. So I'm gonna say export default and call it NavigationComponent just like this, hit save and now everything should still be working. So let's switch back to Google Chrome, you can hit refresh and you can see everything here in the nav component is still working and we have taken a decent amount of code right out of the component just by converting it into a functional component and this is a very good practice.

Anytime that you see a component is not utilizing what's necessary by a class component such as lifecycle hooks or state or anything like that, it's a good practice to convert it to a functional component just like we did right here. So now that we have this all cleaned up, in the next guide we'll see how we can create dynamic links that will either show or hide based on the user's logged in status.

Resources

• Source Code