Build a Flashcard quiz with React
Gbadebo ifedayo
Posted on August 15, 2022
Welcome, today we're going to make a react flashcard quiz with React.js.
First, launch your terminal and use the create react-app command to create our new React app.
Next, we open up our project in our code editor and and remove unnecessary code in the App.js file.
Next, we import React and make an array questions_list
with our test questions in it. Then we develop Flashcard.js and Flashcardlist.js files in the src folder to store project-related components.
The structure of our flashcards is generated next by going to Flashcard.js. We create a function component and give it a props "card" to achieve this. When a flashcard is clicked, the card flip concept is used to reveal the answer. We import useState
in order to achieve this.
In Flashcardlist.js, we import the Flashcard
component and construct a list of flashcards, passing our Flashcard
prop card
to each element of the flashcards array.
After navigating to App.js, we import the useState hook and our flashcardlist
component. We create a state variable array and assign it to the questions_list
array.The array list is then passed as flashcards props to the Flashcardlist
component.
The styles for our flashcards are then stored in a Flashcard.css file that is created next. In Flashcard.js, this file has been imported.
After finishing our quick flashcard app using React, feel free to add more questions to the list to make it more interesting. Here is the URL of the github repository.
Posted on August 15, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
September 23, 2024