Lab 4: About all Hooks
Building a ReactJS application with a user interface that requires the user to input a list of questions and
answer options for each question. Display the questions and answer options to the user and check
whether the user has selected the correct or incorrect answer.
Continue using the same user interface as in Lab 3. However, apply it using Hooks.
1. Design the Quiz Component
Import React and the necessary Hooks from the 'react' package.
Create the Quiz component and set up the initial state using the useState Hook.
Define the quiz questions and answer options as an array of objects.
export const quizData = [
{
question: 'What is ReactJS?',
answers: ['A JavaScript library for building user interfaces', 'A
programming language', 'A database management system'],
correctAnswer: 'A JavaScript library for building user interfaces'
},
{
question: 'What is JSX?',
answers: ['A programming language', 'A file format', 'A syntax extension
for JavaScript'],
correctAnswer: 'A syntax extension for JavaScript'
}
];
2. Implement the user input functionality
Use the useState Hook to manage the user's input for each question and answer option.
Create input fields or components for the user to enter the questions and answer options.
Update the state with the user's input using the useState Hook.
3. Display the questions and answer options
Use the useEffect Hook to display the questions and answer options from the state.
Render the questions and answer options in the UI using JSX.
4. Check the selected answer
Use the useContext Hook to access the selected answer from the state.
Compare the selected answer with the correct answer for each question.
Display whether the selected answer is correct or incorrect in the UI
Page 1
Page 2
