Developing our Quiz App (Part 1)— React.js -L5

Last App

In this article, I am writing more about React.js Components and props. If you have followed React Series, you probably have built Sum App using React multiple components. And we will try to develop a Quiz Application UI.

Quiz Application

Take a look at this code , We are defining the question and the options in Quiz Component .And Component looks more cluttered , so we can define the options in some other component and Question in another component.

Now we are passing the question as props from Quiz Component to Question Component and rendering the Question within the h2 tag . And also we have declared a Options component and passing a options array as props .

In this code , we can do a lot of improvement . Can we pass the data as javascript key value pairs like this .

const ques1= { Question:" " , options: [] }

This is only javascript improvement , we have defined the data as key- value pairs and accessing by Key and passing in props.

<Question ques={ques.Ques} />     
<Options options={ques.options} />

And in the options we just use map function to apply the same functionality for every option -value .

Thanks , If any error occured during this , please share .