For a Quiz to function properly, we need to have questions and answers. In the previous tutorial, we create the main React Component
Quiz. We will learn, in this tutorial, how to create a
If you have missed the previous tutorial where we created the
Quiz Component, you are more than welcome to read it: Quiz Component.
This tutorial won’t have many code examples. It will have three:
- Answer Component
- Question Component
- Changes on Quiz Component
I did not make chunks of code examples because I think that both
Question Components are pretty small. I’ll try to explain everything through inline comments and words after or before the code examples.
We will also go in the same order as mentioned above, so let’s define our
Answer Component. If you don’t have a folder
components inside the
inc/react-wp/src/, create one now.
The Answer Component
Create a file
Answer.js inside the folder
Answer Component will be a simple
li item with the a label containing the text of the answer and also an
input element. This
input will need to listen for a change and then set it as the answer for this question.
input here has also a few attributes other than
name– which we actually don’t really need here,
value– the passed
indexof our answer is the actual order of it (If you remember, we have 3 answers for each question with the order from 0 to 2).
this.props are filled with all the values passed from
Question Component such as
The Question Component
Create a file
Question.js inside the folder
inc/react-wp/src/components. To use the
Question Component we need to import our
The data for the Question will be sent as a property
this.props.question from which we will have access to answers. Let’s now see the code for it.
At the start of this file, we are importing the
Answer Component. We do that because we are using the
Answer Component in the code. We are checking if we have any answers for the current question through
If we have any, we are then building an array of
Answer Components. For each
Answer Component, we are passing:
answer– data for the current answer such as the title,
key– something that React needs to identify each item in the list,
index– we are using it in our
question– the ID of the current question. We are using that when setting an answer,
setAnswer– method for setting the answer.
All these attributes are then available inside
this.props in our
Answer Component. If we have any answers inside
answers, then we will assign to
answer a JSX template with a list of all the answers.
As the last part, we are rendering the question by displaying the title, content and the answers of the current question.
Adding Question to Quiz Component
For now, our Quiz does not render the current Question. We need to import our
Question Component and then assign it to the
output in our
We have some small changes to do here:
QuizComponent at the beginning of the file,
- Set the current question with the
QuestionComponent (see line 21 above).
We are passing only two properties:
setAnswer– the method that we use in
question– data of the current question that we use in
And that’s it!
With this tutorial, we have learned how to use more than one React Component and combine them together. This makes our code separated into modules and it is much more readable and maintainable.
The last Component that we need to define is the
Score Component which will be used to show the score.
Become a Sponsor