From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

QuestionView: MediaDisplay

QuestionView: MediaDisplay

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

QuestionView: MediaDisplay

“

In this session, we will build the Media Display component within our Question View component for our quiz app. This will allow us to display images and videos alongside our quiz questions, making the quiz more engaging and visually appealing. I'll guide you through each step of the process, explaining the code and best practices along the way. Let's get started! Our media display component is a child of the question view component. It will accept a type prop, which we will extract from the question object. It will also accept an image prop. Its value will be available inside the question object if the type is image, otherwise it will be undefined. Finally, it will accept a video prop. Its value will also be available inside the question object. to QuestionView.jsx. Now I am adding the conditional rendering of the MediaDisplay component. I've added a conditional statement that checks if the question type, Q.type, is either image or video. Only if it's true, the MediaDisplay component…

Contents