So it’s time for us to create another component. I’d like to create a component that has the information for the dropdown when we click the blue button in our app.

Now I could do that in a separate file like we’ve done with the Search.js component but it’s really a component that’s not going to be used anywhere else and it’s really part of this search function. I could optionally just create some additional code in the search component.

But this is going to be so much code that I like to put it in a separate component by itself. So I’m going to create a const here and I’ll call this drop down and I’ll use the same function notation with arrow functions.

And then we’re going to need a return statement with some additional JSX. that is given below for you.

Notice that I’m using an icon named biCheck here so I need to make sure that I call that. And I need to make sure that I call this dropdown right underneath this button.

Cool now I get the code for the dropdown and I have all these little check boxes that I’ll be programming later on. Now to me it makes sense to keep things together that belong together and not put everything in a separate file otherwise we’ll just be making sub-components and have to dig through them all over your file structure.

#react #javascript #tailwind-css #css