Project 2 – Simple FAQ/Accordion Using ReactJS 18 🚀
Beginner level
- Another common type of component which can utilizes state is an accordion component, which can both reveal and hide text.
How you will build it? 💻
-
You will learn how to toggle state to make sure that each accordion opens and closes after each button press. You will also learn simple conditionals such as the and (&&) operator that will only show the content of the accordion when the accordion state says it is open.
-
Finally, we will create an entire FAQ (frequently asked questions) section by displaying multiple accordion components. To do so, we will learn how to pass each accordion’s data down into the component using props.
React concepts you will learn 📝
- Toggling state with useState
- Conditionals (&&)
- Passing data to components via props
- Displaying multiple components with .map()
How to get Started 🚀
There are two methods for getting started with this repo.
Familiar with Git?
- git clone https://github.com/hirenkvaghasiya/faq-accordion-with-react-18.git
- cd faq-accordion-with-react-18/
- npm install
- npm run start OR npm start
Not Familiar with Git?
download the .zip file. Extract the contents of the zip file, then open your terminal, change to the project directory, and:
> cd faq-accordion-with-react-18
> npm install
> npm run start OR npm start
Snap Shot(s) 📷
