Create a Flashcard Application Using React
Tags: javascript, react, tutorial, webdev
Published: 2023-05-19 05:57:20

Start by opening your terminal moving into whatever folder you want the application to be in and using `npx create-react-app flash-card-app` flash-card-app being whatever you wish to name the project. Then I like to delete all of the unnecessary flack such as the test files and the logo `.png's` in the public folder. After that make sure to run `npm install` to install the node modules. Then create your `.json` file to store all of the questions and answers.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75djvi8bi5jd1f36oxmp.png)
Once you make your `.json` file go into the `package.json` and inside the scripts object add this line:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl7ij4onneet62e1wqzy.png)
This will allow you to create a RESTful API to both fetch data and post data. Make sure to run the command `npm run server` to actually start the server. Also run `npm start` so we can watch our progress in the browser. Next we will start building out our `App` component which will act as our main parent.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vgh5inj9z2wr461rigx.png)
We will create the `CardList` component and the `Form` component soon for now they're just placeholders. It wouldn't hurt to go ahead and import them though. Now we will actually have to fetch our data from the json server we created. Import `useState` and `useEffect` to help us with this.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8x4iwmfrwfrqgj9z4gvv.png)
Use the `setCards` function in the `GET` request to set cards equal to the data we get back. Then we can pass `cards` as a prop to our `CardList` component. Create the `CardList` component and export it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pxvht35tc7g5u1iqxut.png)
Here we created the `CardList` component. Created our `displayCards` variable which maps through the cards that were passed down and sends each one to the `Card` component that we will create in just a moment. Don't forget to add the `key={card.id}` in the `Card` component. React needs the key component in list items to track what gets added, removed, or reordered. Now we will create the `Card` component with card now being passed as a prop.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3r15l93dv4x6vgdbnagm.png)
Now we can use `useState` to implement a flip functionality to our cards.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctr99pzdr63j9au79sxx.png)
The only thing happening here is when you click on the card the state of `flipCard` will get set to true. Then the ternary allows us to see the answer instead of the question. You should now be able to toggle between the answers and questions by clicking on the individual cards. This is great and all, but what if you want to add new flashcards without going into the json and manually creating new objects. That's why we will do just that by creating a `Form` component. Create a normal component that returns a form with 3 inputs; one for the question, answer, and submit. Like so:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5al0nh0s2bdp4wpvc40.png) 
Now we will use state to set what the user types into the form and pass it to our `handleSubmit` function.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkz7lrozt2ppfq0wwbxo.png)
Here we are taking what the user types for question and answer, and setting our state variables to those values. We then pass that information into our `handleSubmit`, create a new object with it and pass it to the `handleForm` function. Which must be created in the main `App` component in order to set the state of the cards to whatever the user submitted. Don't forget to add `e.preventDefault()`! The handle form function should look like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oozmr6azlwsuuxohjm2t.png)
This function takes the new card object and adds it onto the existing array of card objects. The only issue with this is when we refresh the page all the cards we added are now gone! To prevent this from happening we can add a `POST` request into our `handleSubmit` function.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3phesczlaqsqaex37px.png)
Here we have our `POST` request which takes our `newCardObject` and post's it to our RESTful API resulting in an updated json with our information. Note we don't have to add an id to the new object. The server will do that for us. Also it's nice to reset the state of question and answer at the end of the `handleSubmit` function. That way the form clears itself and we don't have to backspace everything from the inputs when we want to add something new. Lastly, we can add some simple styling:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wq6105043tkle3vd5g5.png)
And you should have fully functional flashcard application that looks something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td0drbawlea3bt9lyccu.png)
Of course if this is all too much work, or you just don't feel like making it yourself. I've published this project to github. You can find it [here](https://github.com/drwomble/flash-card-app).