Building a Quiz with React and WordPress REST API: Question and Answer Components

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 Question and Answer Component.

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 Answer and 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 inc/react-wp/src/components. The 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.

The input here has also a few attributes other than onChange:

• name – which we actually don’t really need here,
• value – the passed index of 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).

The this.props are filled with all the values passed from Question Component such as this.props.answer.

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 Answer Component.

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 this.props.question.answers.

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 Answer Component,
• 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 Quiz Component.

We have some small changes to do here:

• Import Quiz Component at the beginning of the file,
• Set the current question with the Question Component (see line 21 above).

We are passing only two properties:

1. setAnswer – the method that we use in Answer Component,
2. question – data of the current question that we use in Question Component.

And that’s it!

Conclusion

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