It wouldn’t be a final project unless it ended up with another battle between me and dropdowns. Since I started the Flatiron School, setting up dropdowns has been the bane of my existence. Something that is seemingly so simple has proven to be quite the challenge to get up and running. For my final project, I decided to add more spice to this challenge by making two drop downs on my form and having the content of the second drop-down dependent on the selection of the first.
To provide context, my final project is a Craigslist dupe that is geared toward the Haitian community. In the future, I hope to change the language of the application to Haitian Creole and launch the application, but I am getting ahead of myself. Like Craigslist, users have the option to create postings for events, jobs, things they are selling, etc. On the form, one has to select what category they are posting to as well as the subcategory. The user flow of this is that a user selects a category first and then that selection populates the content of the subcategory dropdown, with all of the subcategories that relate to the selected category. I chose to do it this way to keep the data clean and organized. I did not want to give users the ability to select from all subcategories and accidentally choose one that is not related to the selected category.
However, doing this took some thought. In the form, I imported a component called DropdownOptions and I call that function after my select tag for subcategories. This component takes in two props, one being the CategoryID and the other called subcategories. The value of CategoryID is equal to this.state.category and the value of subcategories is equal to this.props.subcategories. In the DropdownOptions component, the subcategories prop, which is all array of all the subcategory objects, is mapped through. For each subcategory, we check and see if the category_id, one of the attributes of a subcategory object, is equal to CategoryID prop that was passed in. If the two are equal, an option tag is created. This option tag has the name of the subcategory and the value of that subcategory’s ID.
All in all, once I mapped out how to do this, it was not super difficult to implement. With the guidance of my instructor, I got it right on the first try. I was very anxious about getting this to work, only because I had not done a feature like this before. However, as I have learned during my time here at the Flatiron School, sometimes the thought of trying something new is far scarier than the action.