The main Component of our React Quiz will be the Quiz Component. In the last tutorial, we have integrated the React WP Scripts into our plugin. Now, we are going to move forward by changing the files and adding new ones.
If you have yet to learn how to integrate the React WP Scripts into your plugin, please check the last tutorial: Building a Quiz with React and WordPress REST API: React WP Scripts Tool.
Before continuing, we want to be specific when building React Components and React Apps. The word
App is too general. Let’s go into our folder
inc/react-wp/src and change
Quiz.css. Then open
index.js and change it like this:
Fetching Quiz Questions
Our Quiz Component will need to fetch questions from our WordPress site. This will be done using our REST API endpoints. Open
Quiz.js and change
Let’s now define our
constructor method where we need to create the initial state and bind some methods.
We are calling
super() so that everything gets defined and set for the
Component class which we extend with our
Quiz Component. We have also defined
wpqr as a global object so that we can use it inside our code without getting any errors from the react-wp-scripts tool.
state is defined with all the defaults that we need for our Quiz. This is something you might get back to and re-define while building your own React app.
After that, we are binding
this so that we can use
this inside that method. The last thing we do is calling the method.
The Method fetchQuestions
To fetch all the available questions for our Quiz, we will need to fetch them from our previously defined REST API endpoint
wpqr/v1/questions. We are using the Fetch API. You can read on how to use it here.
Basically, we are making a GET request on that endpoint. When we get a response, we are converting it into JSON and in the next
promise we are filling the state with the provided JSON as questions. We are also setting the
state.lastQuestion if we have only 1 question.
Rendering the Quiz Component
To render our Quiz Component and showing the correct output, we will rely on our state.
I’ve tried to explain everything with the comments inside the code, but here is the summary of it:
- We check if there is a score in the state to show that,
- Otherwise, we are showing the current Question,
- We are disabling the button if there is no answer to the current question,
- The button will become a ‘Get Score’ button only if we are on the last question.
We are enabling the button only if our
state.answers has an answer for that Questions’ ID. As you can see from the code, we are missing two Components: Question and Score. That will be done in the next tutorials.
If you also look closely at our code in the method
render, you might notice that there are some other methods passed to our button that we don’t have yet. Those methods are:
There is also a third method missing and that is for setting an answer to the current Question. This method
setAnswer will be used inside the
Method for the Next Question
Again, to use a custom method, we need to bind that method to
this. So let’s add some code to our
The workflow of changing to the next question is:
- Get the current Question from the state (index),
- Get the total number of Questions in the state,
- Raise the index of the current Question by 1
- Check if we have enough Questions
- Set the current Question in the state to our new index,
- Check if the current Question is also the last Question and update the state.
Defining the Missing Methods
Let’s now also define our missing methods
setAnswer so that our compiler will run without issues and that we have something to work with in the next tutorial.
First, of course, is the
constructor. You, probably, already know what is going to happen: binding.
getScore is using the other REST API endpoint, I will leave that for the tutorial on getting the Score and showing it. But feel free to try it out and see if you can make it work. Actually, I encourage you to do so.
setAnswer method is a simple one. This method will take two parameters
question. The parameter
answer will be the order of the answer in that question. In our metabox, that we have done in the previous tutorial on creating CPT and REST API Routes, the answers order goes from 0 to 2 (3 answers).
question will be the ID of the question. In the method
setAnswer, we will retrieve all the answers from the state, update them with our new answer and set the answers back to the state.
When building React Apps, it is important to know how to handle the state and how to use it for loading the output conditionally. I might be wrong since I am just beginning my journey in React Development. Any experts in that field, feel free to advise me and others in the comments below 🙂
In the next tutorial, we will create two new components:
Answer. Try to create them on your own and then check on how I did it.