Improving Our Quiz App React .js — L6

JavascriptMaster

3 min readOct 13, 2022

If you have not read our last article,please read this before this.

Building our Second App — React.js

In this article, I am writing more about React.js Components and props. If you have followed React Series, you probably…

medium.com

Map Function:

Let’s you have an array and want to square the elements of array. So you will write a function like this(this is pseudocode )and pass the array -

Square(x)
    for i between 0 to x.length
        x[i]= x[i]* x[i]
        print x[i]x= [1,2, 3, 4, 5]

And it will print square of all elements . So same type of functionality is provided by map in just one line. The map() method creates a new array and stores the result given by function.

{options.map((data, i) => (
   <p key={i + 1}>
   {i + 1}: {data}</p>
))}

And there is we are passing an array data and map method creates a new array like this .

[<p>1: data[0]</p> , <p> 2: data[1]</p> ......]

Passing More than one question :

Now if you want to pass more than one question in Quiz Component. Let’s dive in the code.

It was dare to develop the quiz more than one questions. We did it and defined two questions .😂

But you have to think about a real quiz scenario , there can be more than 100 questions . So now I know you are going to define 100+ questions objects . Now we have to think again and try to implement a solution that does’nt require to write 100+ objects.

Try to change the data format -

quizques :
       [{ ques1 : ques1, options:{options1 ....}}, 
        { ques2 : ques1, options:{options1 ....}} ...............]

Now pass 1000 questions list ,we are not going to write again and again . So there is new issue , writing 1000 question in same file , make this file worse. So I have decided I will create a new component , after this I will import to App.js