How to Reuse Components in React
Hi and welcome back to the course. I went ahead and I closed all the files except for dashboard.js.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

I want to show you one thing before we move on just explaining why we built it the way we built it. The first reason is it's pretty clean, and the second reason is it allows us to add in more items.

Right now we have newsletters and requests, but if we want to use this component in a different page on this app in this application somewhere we can, and we just have to provide more tabs. Say we're on a different page: all we need to do is add in more of these if we want more options.

large

So I just copied and pasted the newsletter and request objects here I'm going name them something like 'Hey' and 'What's Gucci'. Then we can just say something else in here and something else here.

large

Now when we go into our application you'll see that, once it reloads, and log in that we have all sorts of items. Now you can also see that it kind of automatically selects these.

large

So the reason that's happening is because we left this one to true. So let's set that to false. So basically all you have to do to add more tabs is put in more objects, and the components that belong there.

So we've just developed an awesome component that can be reused and really easily used by just throwing in this function, this right here, and then the objects. Then it will automatically go in here and display which component belongs to that tab in tab NAV.

large

So that's kind of cool reason we developed that component, and it really kind of shows you the importance of making your components reusable like that. This is the whole purpose of components.

It's exactly like how we have a button in whatever applications that we are going to use in different places, like this plus button and this button. They are the same button, so no need to rewrite the JSX and CSS twice. Just write it once, and use it in five different places.

large

So that's the reason we wrote the component like this. So let's go and get rid of those two tabs. We don't want them.

Let's hop into the next video where we will continue on with building out the newsletter component. So we didn't make any changes this was just kind of an informational video. I'll see in the next video.