i need to show my question options as a radio buttons in my popup module i have tried but i cant find one solutions its my question module:

import questions from "./Data";
const QuestionModel = () => {
  return (
    <div className="modal-body">
      <div className="app">
        {questions.map((item) => {
          return (
            <>
              <h3>{item.questionText}</h3>
            </>
          );
        })}
      </div>
    </div>
  );
};

and this is my sample data file:

const questions = [
    {
        questionText: 'What is the capital of France?',
        answerOptions: [
            { answerText: 'New York', isCorrect: false },
            { answerText: 'London', isCorrect: false },
            { answerText: 'Paris', isCorrect: true },
            { answerText: 'Dublin', isCorrect: false },
        ],
    },
    {
        questionText: 'Who is CEO of Tesla?',
        answerOptions: [
            { answerText: 'Jeff Bezos', isCorrect: false },
            { answerText: 'Elon Musk', isCorrect: true },
            { answerText: 'Bill Gates', isCorrect: false },
            { answerText: 'Tony Stark', isCorrect: false },
        ],
    },
    {
        questionText: 'The iPhone was created by which company?',
        answerOptions: [
            { answerText: 'Apple', isCorrect: true },
            { answerText: 'Intel', isCorrect: false },
            { answerText: 'Amazon', isCorrect: false },
            { answerText: 'Microsoft', isCorrect: false },
        ],
    },
    {
        questionText: 'How many Harry Potter books are there?',
        answerOptions: [
            { answerText: '1', isCorrect: false },
            { answerText: '4', isCorrect: false },
            { answerText: '6', isCorrect: false },
            { answerText: '7', isCorrect: true },
        ],
    },
];
export default questions;

i need to show answer text as my options in my module

CodePudding user response：

The answersOptions is an array with objects inside, so you need to map through this array and display the object.answerText.

Code:

{questions.map((item) => {
          return (
            <>
              <h3>{item.questionText}</h3>
              <div>
                {item.answerOptions.map((ans) => {
                  return (
                    <>
                      <input
                        type="radio"
                        name={item.questionText}
                        id={item.questionText}
                      />
                      <label htmlFor={item.questionText}>
                        {ans.answerText}
                      </label>
                    </>
                  );
                })}
              </div>
            </>
          );
        })}