Currently, there are 3 React components pertaining to the FAQ section on pennapps.com:
FAQSection.js - A single question and answer component, that opens and closes using the Collapse component
FAQs.js - A group of FAQSection.js components, which comprises an entire FAQ portion of a page
ApplicationsFAQs.js - A component that uses FAQSection.js instead of FAQs.js to be included in the Organizers page
The problem is that ApplicationsFAQs.js contains duplicated logic--it reimplements the FAQs.js component using FAQSection.js only, when it could use an FAQs.js component and pass in the right content instead.
Because React's greatest strength is that it is modular, and this situation is a good example of when to abide by DRY principles we would like the Organizers page to use FAQs.js instead of ApplicationsFAQs.js.
To start, see lines 6-16 of FAQs.js, 14-24 of ApplicationsFAQs, and line 50 of organizers.js. As a hint, you'll need to replace the use of map() in ApplicationsFAQs with the FAQs.js component. The goal is to be able to delete ApplicationsFAQs.js for it not being in use once we're done here!
Currently, there are 3 React components pertaining to the FAQ section on pennapps.com:
The problem is that ApplicationsFAQs.js contains duplicated logic--it reimplements the FAQs.js component using FAQSection.js only, when it could use an FAQs.js component and pass in the right content instead.
Because React's greatest strength is that it is modular, and this situation is a good example of when to abide by DRY principles we would like the Organizers page to use FAQs.js instead of ApplicationsFAQs.js.
To start, see lines 6-16 of FAQs.js, 14-24 of ApplicationsFAQs, and line 50 of organizers.js. As a hint, you'll need to replace the use of
map()in ApplicationsFAQs with the FAQs.js component. The goal is to be able to delete ApplicationsFAQs.js for it not being in use once we're done here!Some resources: